"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Empty, Notice } from "@/components/ui";
type S = { id: string; label: string; query: Record<string, string>; alertEnabled: boolean; alertFrequency: string; lastAlertAt: string | null; createdAt: string };
export function AlertsView({ items }: { items: S[] }) {
  const router = useRouter();
  const patch = async (id: string, b: Record<string, unknown>) => { await fetch(`/api/me/saved-searches/${id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify(b) }); router.refresh(); };
  const del = async (id: string) => { await fetch(`/api/me/saved-searches/${id}`, { method: "DELETE" }); router.refresh(); };
  return (
    <div>
      <h1 className="text-2xl md:text-3xl font-extrabold tracking-tight mb-1">Alertes</h1><p className="text-sm text-ink-2 mb-4">Recevez par courriel les nouvelles annonces correspondant à vos recherches sauvegardées (compte requis). Fréquence au choix, désactivable en un clic.</p>
      {items.length === 0 ? <Empty title="Aucune recherche sauvegardée" hint="Sur la page des résultats, cliquez « Sauvegarder » : connecté, la recherche est enregistrée dans votre compte et peut devenir une alerte." action={{ href: "/recherche", label: "Lancer une recherche" }} /> : (
        <ul className="tv-card divide-y divide-line text-sm">{items.map((s) => <li key={s.id} className="p-3 flex flex-wrap items-center gap-3"><div className="min-w-0 flex-1"><Link href={`/recherche?${new URLSearchParams(s.query)}`} className="font-semibold hover:underline">{s.label}</Link><p className="text-xs text-ink-3">{s.lastAlertAt ? `Dernière alerte ${new Date(s.lastAlertAt).toLocaleDateString("fr-CA")}` : "Aucune alerte envoyée encore"}</p></div>
          <label className="flex items-center gap-1 text-xs"><input type="checkbox" checked={s.alertEnabled} onChange={(e) => patch(s.id, { alertEnabled: e.target.checked })} className="accent-[#e0263c]" /> Alerte</label>
          <select value={s.alertFrequency} onChange={(e) => patch(s.id, { alertFrequency: e.target.value })} className="tv-chip appearance-none text-xs"><option value="INSTANT">Dès publication</option><option value="DAILY">Quotidienne</option><option value="WEEKLY">Hebdomadaire</option><option value="OFF">Désactivée</option></select>
          <button type="button" onClick={() => del(s.id)} className="text-xs underline text-ink-3">Supprimer</button></li>)}</ul>
      )}
      <div className="mt-4"><Notice>Les alertes sont envoyées par le service de courriel Toveli à l'adresse vérifiée de votre compte, selon la fréquence choisie, uniquement pour les nouvelles annonces (agrégées ou directes) correspondant à vos critères.</Notice></div>
    </div>
  );
}