"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { toast } from "sonner"

const STATUSES = [
  { value: "open",        label: "Open",        color: "border-amber-500/30 text-amber-400 hover:bg-amber-500/10" },
  { value: "in_progress", label: "In Progress",  color: "border-blue-500/30 text-blue-400 hover:bg-blue-500/10" },
  { value: "resolved",    label: "Resolved",    color: "border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10" },
  { value: "closed",      label: "Closed",      color: "border-white/10 text-white/40 hover:bg-white/5" },
]

export function MaintenanceStatusUpdater({ request }: { request: any }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [resolutionNotes, setResolutionNotes] = useState(request.resolution_notes ?? "")
  const [actualCost, setActualCost] = useState(request.actual_cost ?? "")

  async function updateStatus(status: string) {
    setLoading(true)
    await fetch(`/api/maintenance/${request.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        status,
        resolution_notes: resolutionNotes || undefined,
        actual_cost: actualCost ? Number(actualCost) : undefined,
      }),
    })
    setLoading(false)
    toast.success("Status updated")
    router.refresh()
  }

  return (
    <div className="rounded-xl border border-white/[0.06] bg-[#16161f] p-5 space-y-4">
      <h3 className="text-xs font-medium uppercase tracking-wider text-white/30">Update Status</h3>

      <div className="flex gap-2 flex-wrap">
        {STATUSES.map((s) => (
          <button
            key={s.value}
            onClick={() => updateStatus(s.value)}
            disabled={loading || request.status === s.value}
            className={`rounded-lg border px-3 py-1.5 text-xs font-medium transition disabled:opacity-40 ${
              request.status === s.value
                ? "opacity-40 cursor-default"
                : s.color
            }`}
          >
            {s.label}
          </button>
        ))}
      </div>

      <div>
        <label className="mb-1.5 block text-xs font-medium text-white/50">Resolution Notes</label>
        <textarea
          rows={3}
          value={resolutionNotes}
          onChange={(e) => setResolutionNotes(e.target.value)}
          placeholder="Describe what was done to resolve the issue..."
          className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none ring-indigo-500 transition focus:border-indigo-500/50 focus:ring-1 resize-none"
        />
      </div>

      <div>
        <label className="mb-1.5 block text-xs font-medium text-white/50">Actual Cost ($)</label>
        <input
          type="number"
          step="0.01"
          min="0"
          value={actualCost}
          onChange={(e) => setActualCost(e.target.value)}
          placeholder="0.00"
          className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none ring-indigo-500 transition focus:border-indigo-500/50 focus:ring-1"
        />
      </div>

      <button
        onClick={() => updateStatus(request.status)}
        disabled={loading}
        className="w-full rounded-lg bg-indigo-600 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition"
      >
        {loading ? "Saving..." : "Save Notes"}
      </button>
    </div>
  )
}