"use client";

import { useEffect, useRef, useState } from "react";
import AppShell from "@/components/AppShell";
import { api } from "@/lib/client";
import { FAILURE_REASONS } from "@/lib/enums";

const FAILURE_REASON_LABEL: Record<string, string> = {
  pelanggan_tidak_ada: "Pelanggan tidak ada",
  pelanggan_menolak: "Pelanggan menolak",
  alamat_tidak_ditemukan: "Alamat tidak ditemukan",
  lainnya: "Lainnya",
};

interface Delivery {
  id: string;
  status: string;
  destinationAddress: string;
  destinationPhone?: string;
  deliveryNotes?: string;
  order: {
    id: string;
    customer: { name: string; phone?: string };
    items: { id: string; quantity: number; product: { name: string; unit: string } }[];
  };
  proofs: any[];
}

export default function CourierPage() {
  const [items, setItems] = useState<Delivery[]>([]);
  const [loading, setLoading] = useState(true);
  const load = () => api<Delivery[]>("/api/deliveries").then((d) => { setItems(d); setLoading(false); });
  useEffect(() => { load(); const t = setInterval(load, 12000); return () => clearInterval(t); }, []);

  return (
    <AppShell title="Antrian Pengiriman">
      {loading ? (
        <p className="text-slate-500">Memuat…</p>
      ) : items.length === 0 ? (
        <div className="card text-center text-slate-500">Tidak ada pengiriman aktif. 🎉</div>
      ) : (
        <div className="space-y-4">
          {items.map((d) => <DeliveryCard key={d.id} d={d} onChange={load} />)}
        </div>
      )}
    </AppShell>
  );
}

function DeliveryCard({ d, onChange }: { d: Delivery; onChange: () => void }) {
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");
  const fileRef = useRef<HTMLInputElement>(null);
  const [pendingPhoto, setPendingPhoto] = useState<string | null>(null);
  const [recipientName, setRecipientName] = useState("");
  const [conditionNotes, setConditionNotes] = useState("");
  const [failing, setFailing] = useState(false);
  const [failReason, setFailReason] = useState("");

  const waLink = d.destinationPhone
    ? `https://wa.me/${d.destinationPhone.replace(/[^0-9]/g, "").replace(/^0/, "62")}`
    : null;
  const mapsLink = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(d.destinationAddress)}`;

  async function setStatus(status: string, failureReason?: string) {
    setErr(""); setBusy(true);
    try {
      await api(`/api/deliveries/${d.id}/status`, {
        method: "PATCH",
        body: JSON.stringify({ status, failureReason }),
      });
      onChange();
    } catch (e: any) { setErr(e.message); } finally { setBusy(false); }
  }

  async function onPhoto(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file) return;
    setErr("");
    try {
      const dataUrl = await new Promise<string>((res, rej) => {
        const r = new FileReader();
        r.onload = () => res(r.result as string);
        r.onerror = rej;
        r.readAsDataURL(file);
      });
      setPendingPhoto(dataUrl);
    } catch (e: any) { setErr(e.message); }
  }

  async function submitProof() {
    if (!pendingPhoto) return;
    setErr(""); setBusy(true);
    try {
      await api(`/api/deliveries/${d.id}/proof`, {
        method: "POST",
        body: JSON.stringify({
          photoDataUrl: pendingPhoto,
          recipientName: recipientName || undefined,
          conditionNotes: conditionNotes || undefined,
        }),
      });
      setPendingPhoto(null); setRecipientName(""); setConditionNotes("");
      onChange();
    } catch (e: any) { setErr(e.message); } finally { setBusy(false); }
  }

  function submitFail() {
    if (!failReason) return;
    const valid = (FAILURE_REASONS as readonly string[]).includes(failReason) ? failReason : "lainnya";
    setFailing(false); setFailReason("");
    setStatus("failed", valid);
  }

  return (
    <div className="card space-y-3">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-lg font-bold">{d.order.customer.name}</p>
          <p className="text-sm text-slate-600">{d.destinationAddress}</p>
          {d.destinationPhone && <p className="text-sm text-slate-500">📞 {d.destinationPhone}</p>}
        </div>
        <span className={`badge ${d.status === "on_the_way" ? "bg-amber-100 text-amber-700" : "bg-slate-100 text-slate-600"}`}>
          {d.status === "on_the_way" ? "Berangkat" : "Menunggu"}
        </span>
      </div>

      <ul className="rounded-lg bg-slate-50 p-3 text-sm">
        {d.order.items.map((it) => (
          <li key={it.id} className="flex justify-between">
            <span>{it.product.name}</span>
            <span className="font-medium">{it.quantity} {it.product.unit}</span>
          </li>
        ))}
      </ul>

      <div className={`grid gap-2 ${waLink ? "grid-cols-2" : "grid-cols-1"}`}>
        {waLink && (
          <a href={waLink} target="_blank" className="btn-outline btn-lg">💬 WhatsApp</a>
        )}
        <a href={mapsLink} target="_blank" className="btn-outline btn-lg">🗺️ Navigasi</a>
      </div>

      {d.status === "waiting" && (
        <button className="btn-primary btn-lg w-full" disabled={busy} onClick={() => setStatus("on_the_way")}>
          🛵 Berangkat
        </button>
      )}

      {d.status === "on_the_way" && (
        <div className="space-y-2">
          {pendingPhoto ? (
            <div className="space-y-2 rounded-lg bg-slate-50 p-3">
              <img src={pendingPhoto} alt="Preview bukti" className="max-h-48 w-full rounded object-contain" />
              <input
                className="input" placeholder="Nama penerima (opsional)"
                value={recipientName} onChange={(e) => setRecipientName(e.target.value)}
              />
              <input
                className="input" placeholder="Catatan kondisi barang (opsional, mis. '1 peti rusak')"
                value={conditionNotes} onChange={(e) => setConditionNotes(e.target.value)}
              />
              <div className="flex gap-2">
                <button className="btn-primary flex-1" disabled={busy} onClick={submitProof}>Kirim & Selesai</button>
                <button className="btn-outline" disabled={busy} onClick={() => setPendingPhoto(null)}>Batal</button>
              </div>
            </div>
          ) : (
            <button className="btn-primary btn-lg w-full" disabled={busy} onClick={() => fileRef.current?.click()}>
              📸 Unggah Foto & Selesai
            </button>
          )}
          <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onPhoto} />

          {failing ? (
            <div className="space-y-2 rounded-lg bg-slate-50 p-3">
              <select className="input" value={failReason} onChange={(e) => setFailReason(e.target.value)}>
                <option value="">— pilih alasan —</option>
                {FAILURE_REASONS.map((r) => <option key={r} value={r}>{FAILURE_REASON_LABEL[r] ?? r}</option>)}
              </select>
              <div className="flex gap-2">
                <button className="btn-primary flex-1" disabled={!failReason || busy} onClick={submitFail}>Konfirmasi Gagal</button>
                <button className="btn-outline" disabled={busy} onClick={() => setFailing(false)}>Batal</button>
              </div>
            </div>
          ) : (
            <button className="btn-outline btn-lg w-full text-red-600" disabled={busy} onClick={() => setFailing(true)}>
              Gagal / Ditolak
            </button>
          )}
          <p className="text-center text-xs text-slate-500">Foto wajib sebelum status jadi "Terkirim".</p>
        </div>
      )}

      {err && <p className="text-sm text-red-600">{err}</p>}
    </div>
  );
}