"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Empty, Notice } from "@/components/ui";
type V = { id: string; status: string; proposedSlots: string[]; confirmedSlot: string | null; note: string | null; ownerId: string; requesterId: string; inquiryId: string | null; title: string | null; slug: string; city: string | null; createdAt: string };
const fmt = (iso: string) => new Date(iso).toLocaleString("fr-CA", { timeZone: "America/Toronto", weekday: "short", day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
const LABEL: Record<string, string> = { REQUESTED: "Demandée", CONFIRMED: "Confirmée", CANCELLED: "Annulée", DONE: "Effectuée" };
export function ViewingsView({ me, items }: { me: string; items: V[] }) {
  const router = useRouter();
  const act = async (id: string, action: string, slot?: string) => { const r = await fetch(`/api/viewings/${id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ action, slot }) }); if (!r.ok) alert((await r.json()).error?.message ?? "Erreur"); router.refresh(); };
  return (
    <div>
      <h1 className="text-2xl md:text-3xl font-extrabold tracking-tight mb-1">Visites</h1><p className="text-sm text-ink-2 mb-4">Heure de l'Est (America/Toronto). Le propriétaire confirme un des créneaux proposés ; les conflits à moins de 30 minutes sont refusés.</p>
      {items.length === 0 ? <Empty title="Aucune demande de visite" hint="Demandez une visite depuis une fiche publiée sur Toveli, ou attendez les demandes sur vos annonces." /> : (
        <ul className="space-y-3">{items.map((v) => { const owner = v.ownerId === me; return (
          <li key={v.id} className="tv-card p-4">
            <div className="flex flex-wrap items-center gap-2"><span className={`tv-badge ${v.status === "CONFIRMED" ? "bg-good-soft text-good" : v.status === "REQUESTED" ? "bg-warn-soft text-warn" : "bg-surface-2 text-ink-3"}`}>{LABEL[v.status]}</span><span className="text-xs text-ink-3">{owner ? "Pour mon annonce" : "Ma demande"} · {new Date(v.createdAt).toLocaleDateString("fr-CA")}</span></div>
            <p className="font-semibold mt-1"><Link href={`/annonce/${encodeURIComponent("toveli:" + v.slug)}`} className="hover:underline">{v.title ?? "Annonce"}</Link> <span className="text-ink-3 font-normal text-sm">· {v.city}</span></p>
            {v.note && <p className="text-sm text-ink-2 mt-1">« {v.note} »</p>}
            {v.status === "CONFIRMED" && v.confirmedSlot && <p className="text-sm mt-2">📅 <strong>{fmt(v.confirmedSlot)}</strong></p>}
            {v.status === "REQUESTED" && <div className="mt-2 flex flex-wrap gap-2">{v.proposedSlots.map((s) => owner ? <button key={s} type="button" onClick={() => act(v.id, "confirm", s)} className="tv-chip">Confirmer {fmt(s)}</button> : <span key={s} className="tv-chip">{fmt(s)}</span>)}</div>}
            <div className="mt-2 flex gap-3 text-xs">{!["CANCELLED", "DONE"].includes(v.status) && <button type="button" onClick={() => confirm("Annuler cette visite ?") && act(v.id, "cancel")} className="underline text-ink-3">Annuler</button>}{owner && v.status === "CONFIRMED" && <button type="button" onClick={() => act(v.id, "done")} className="underline text-ink-3">Marquer effectuée</button>}{v.inquiryId && <Link href={`/membre/messages/${v.inquiryId}`} className="underline text-brand-dark">Conversation</Link>}</div>
          </li>); })}</ul>
      )}
      <div className="mt-4"><Notice>Par sécurité, l'adresse exacte d'une annonce « rue seulement » ou « secteur » n'est communiquée qu'après confirmation d'une visite, par le propriétaire, dans la conversation.</Notice></div>
    </div>
  );
}