"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Pencil, Trash2 } from "lucide-react"
import { toast } from "sonner"

interface UnitActionsProps {
  propertyId: string
  unitId: string
  unitNumber: string
}

export function UnitActions({ propertyId, unitId, unitNumber }: UnitActionsProps) {
  const router = useRouter()
  const [confirming, setConfirming] = useState(false)
  const [loading, setLoading] = useState(false)

  async function handleDelete() {
    setLoading(true)
    try {
      const res = await fetch(`/api/units/${unitId}`, { method: "DELETE" })
      if (!res.ok) {
        const data = await res.json().catch(() => null)
        toast.error(data?.error ?? "Failed to delete unit")
        return
      }
      toast.success(`Unit ${unitNumber} deleted`)
      router.refresh()
    } catch {
      toast.error("Network error — please try again")
    } finally {
      setLoading(false)
      setConfirming(false)
    }
  }

  if (confirming) {
    return (
      <div className="flex items-center gap-2">
        <span className="text-xs text-white/50">Delete?</span>
        <button
          onClick={handleDelete}
          disabled={loading}
          className="rounded-lg bg-red-600 px-2.5 py-1.5 text-xs font-medium text-white hover:bg-red-500 disabled:opacity-50 transition"
        >
          {loading ? "Deleting…" : "Yes"}
        </button>
        <button
          onClick={() => setConfirming(false)}
          disabled={loading}
          className="rounded-lg border border-white/10 px-2.5 py-1.5 text-xs text-white/60 hover:text-white transition"
        >
          Cancel
        </button>
      </div>
    )
  }

  return (
    <div className="flex items-center gap-1">
      <Link
        href={`/properties/${propertyId}/units/${unitId}/edit`}
        className="rounded-lg border border-white/10 p-1.5 text-white/40 hover:border-white/20 hover:text-white transition"
        title="Edit unit"
      >
        <Pencil className="h-3.5 w-3.5" />
      </Link>
      <button
        onClick={() => setConfirming(true)}
        className="rounded-lg border border-red-500/20 p-1.5 text-red-400/80 hover:border-red-500/40 hover:text-red-400 hover:bg-red-500/5 transition"
        title="Delete unit"
      >
        <Trash2 className="h-3.5 w-3.5" />
      </button>
    </div>
  )
}