"use client"

import { useState, useEffect } from "react"
import { Loader2, RefreshCw, CheckCircle2, XCircle, DollarSign, Clock, ChevronDown } from "lucide-react"
import Swal from "sweetalert2";

const STATUS_COLORS: Record<string, string> = {
  PENDING: "bg-yellow-100 text-yellow-700 border-yellow-200",
  APPROVED: "bg-blue-100 text-blue-700 border-blue-200",
  REJECTED: "bg-red-100 text-red-700 border-red-200",
  REFUNDED: "bg-emerald-100 text-emerald-700 border-emerald-200",
}

const STATUS_ICONS: Record<string, any> = {
  PENDING: Clock,
  APPROVED: CheckCircle2,
  REJECTED: XCircle,
  REFUNDED: DollarSign,
}

export default function AdminReturnsPage() {
  const [returns, setReturns] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [filterStatus, setFilterStatus] = useState("ALL")
  const [selected, setSelected] = useState<any>(null)
  const [adminNote, setAdminNote] = useState("")
  const [updating, setUpdating] = useState(false)

  const fetchReturns = async () => {
    setLoading(true)
    try {
      const query = filterStatus !== "ALL" ? `?status=${filterStatus}` : ""
      const res = await fetch(`/api/admin/returns${query}`)
      if (res.ok) setReturns(await res.json())
    } catch { }
    setLoading(false)
  }

  useEffect(() => { fetchReturns() }, [filterStatus])

  const handleUpdate = async (id: string, status: string) => {
    setUpdating(true)
    try {
      const res = await fetch("/api/admin/returns", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id, status, adminNote })
      })
      if (!res.ok) throw new Error("Failed to update")
      setSelected(null)
      setAdminNote("")
      await fetchReturns()
    } catch (err: any) {
      Swal.fire({ text: err.message, confirmButtonColor: "#18181b" })
    } finally {
      setUpdating(false)
    }
  }

  const counts = {
    ALL: returns.length,
    PENDING: returns.filter(r => r.status === "PENDING").length,
    APPROVED: returns.filter(r => r.status === "APPROVED").length,
    REJECTED: returns.filter(r => r.status === "REJECTED").length,
    REFUNDED: returns.filter(r => r.status === "REFUNDED").length,
  }

  return (
    <div className="max-w-6xl space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-black uppercase tracking-tight text-zinc-950">Return Requests</h1>
        <button onClick={fetchReturns} className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-zinc-600 hover:text-zinc-950 transition-colors">
          <RefreshCw className="w-4 h-4" /> Refresh
        </button>
      </div>

      {/* Status Filter */}
      <div className="flex gap-2 flex-wrap">
        {(["ALL", "PENDING", "APPROVED", "REJECTED", "REFUNDED"] as const).map(s => (
          <button
            key={s}
            onClick={() => setFilterStatus(s)}
            className={`px-4 py-2 text-xs font-bold uppercase tracking-widest rounded-full border transition-colors ${filterStatus === s ? "bg-zinc-950 text-white border-zinc-950" : "bg-white text-zinc-500 border-zinc-200 hover:border-zinc-950 hover:text-zinc-950"}`}
          >
            {s} ({counts[s as keyof typeof counts]})
          </button>
        ))}
      </div>

      {loading ? (
        <div className="flex h-64 items-center justify-center"><Loader2 className="h-8 w-8 animate-spin text-zinc-400" /></div>
      ) : returns.length === 0 ? (
        <div className="text-center py-20 text-zinc-400">
          <RefreshCw className="w-12 h-12 mx-auto mb-4 opacity-30" />
          <p className="text-sm uppercase tracking-widest font-bold">No return requests</p>
        </div>
      ) : (
        <div className="space-y-4">
          {returns.map(r => {
            const Icon = STATUS_ICONS[r.status] || Clock
            return (
              <div key={r.id} className="bg-white border border-zinc-200 rounded-lg overflow-hidden hover:shadow-sm transition-shadow">
                <div className="p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                  <div className="space-y-1">
                    <div className="flex items-center gap-3">
                      <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border ${STATUS_COLORS[r.status]}`}>
                        <Icon className="w-3 h-3" /> {r.status}
                      </span>
                      <span className="text-xs text-zinc-400 font-mono">#{r.orderId.slice(-8).toUpperCase()}</span>
                    </div>
                    <p className="text-sm font-bold text-zinc-900">{r.user?.name} <span className="font-normal text-zinc-500">({r.user?.email})</span></p>
                    <p className="text-xs text-zinc-500"><span className="font-semibold">Reason:</span> {r.reason}</p>
                    <p className="text-xs text-zinc-400">{new Date(r.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}</p>
                  </div>

                  {r.status === "PENDING" && (
                    <div className="flex gap-2 shrink-0">
                      <button
                        onClick={() => { setSelected(r); setAdminNote("") }}
                        className="flex items-center gap-1 px-4 py-2 text-xs font-bold uppercase tracking-widest border border-zinc-200 rounded-sm hover:bg-zinc-950 hover:text-white hover:border-zinc-950 transition-colors"
                      >
                        Manage
                      </button>
                    </div>
                  )}
                </div>

                {r.adminNote && (
                  <div className="px-5 pb-4">
                    <p className="text-xs text-zinc-500 bg-zinc-50 border border-zinc-100 rounded px-3 py-2"><span className="font-bold">Admin Note:</span> {r.adminNote}</p>
                  </div>
                )}
              </div>
            )
          })}
        </div>
      )}

      {/* Action Modal */}
      {selected && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
          <div className="bg-white rounded-lg p-8 max-w-md w-full mx-4 shadow-2xl">
            <h2 className="text-lg font-black uppercase tracking-wider text-zinc-950 mb-2">Manage Return</h2>
            <p className="text-xs text-zinc-500 mb-1"><span className="font-bold">Customer:</span> {selected.user?.name}</p>
            <p className="text-xs text-zinc-500 mb-4"><span className="font-bold">Reason:</span> {selected.reason}</p>

            <label className="text-xs font-bold uppercase tracking-widest text-zinc-700 block mb-2">Admin Note (optional)</label>
            <textarea
              value={adminNote}
              onChange={e => setAdminNote(e.target.value)}
              className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-sm bg-zinc-50 focus:bg-white focus:outline-none focus:border-zinc-950 transition-all mb-6 resize-none"
              rows={3}
              placeholder="Reason for approval/rejection, instructions, etc..."
            />

            <div className="flex flex-col gap-2">
              <button onClick={() => handleUpdate(selected.id, "APPROVED")} disabled={updating} className="w-full py-3 text-xs font-bold uppercase tracking-widest bg-blue-600 text-white rounded-sm hover:bg-blue-700 disabled:opacity-50 transition-colors flex items-center justify-center gap-2">
                {updating ? <Loader2 className="w-4 h-4 animate-spin" /> : <CheckCircle2 className="w-4 h-4" />} Approve Return
              </button>
              <button onClick={() => handleUpdate(selected.id, "REJECTED")} disabled={updating} className="w-full py-3 text-xs font-bold uppercase tracking-widest bg-red-600 text-white rounded-sm hover:bg-red-700 disabled:opacity-50 transition-colors flex items-center justify-center gap-2">
                {updating ? <Loader2 className="w-4 h-4 animate-spin" /> : <XCircle className="w-4 h-4" />} Reject Return
              </button>
              <button onClick={() => handleUpdate(selected.id, "REFUNDED")} disabled={updating} className="w-full py-3 text-xs font-bold uppercase tracking-widest bg-emerald-600 text-white rounded-sm hover:bg-emerald-700 disabled:opacity-50 transition-colors flex items-center justify-center gap-2">
                {updating ? <Loader2 className="w-4 h-4 animate-spin" /> : <DollarSign className="w-4 h-4" />} Mark as Refunded
              </button>
              <button onClick={() => setSelected(null)} className="w-full py-3 text-xs font-bold uppercase tracking-widest border border-zinc-200 text-zinc-600 rounded-sm hover:bg-zinc-100 transition-colors">
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}