import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export const AGENCIES = [
  { city: "Champigneulles (54)", tel: "+33 3 83 31 23 21" },
  { city: "Heillecourt (54)", tel: "+33 3 83 53 27 28" },
  { city: "Toul (54)", tel: "+33 3 83 31 23 21" },
  { city: "Belleville-sur-Meuse (55)", tel: "+33 3 29 84 78 51" },
  { city: "Combles-en-Barrois (55)", tel: "+33 3 29 45 07 52" },
  { city: "Florange (57)", tel: "+33 3 82 58 04 84" },
  { city: "Saint-Avold (57)", tel: "+33 3 87 04 16 99" },
  { city: "Woippy (57)", tel: "+33 3 87 51 24 24" },
  { city: "Chavelot (88)", tel: "+33 3 29 38 11 11" },
];

function Phone({ className = "w-5 h-5" }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2Z" />
    </svg>
  );
}

/** Liste des 9 sites, fond clair (pour la modale) */
export function AgencyList() {
  return (
    <ul className="divide-y divide-border rounded-xl border border-border overflow-hidden">
      {AGENCIES.map((a) => (
        <li key={a.city}>
          <a
            href={`tel:${a.tel.replace(/\s/g, "")}`}
            className="flex items-center justify-between gap-4 px-4 py-3 hover:bg-secondary transition-colors"
          >
            <span className="font-semibold text-brand">{a.city}</span>
            <span className="flex items-center gap-2 font-bold text-teal whitespace-nowrap">
              <Phone className="w-4 h-4" /> {a.tel}
            </span>
          </a>
        </li>
      ))}
    </ul>
  );
}

/** Bouton "Nous appeler" du header : ouvre une pop-up avec les 9 numéros */
export function CallAgenciesDialog({ label, className }: { label?: string; className?: string }) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <button
          type="button"
          className={className ?? "inline-flex items-center gap-2 rounded-full bg-white text-brand font-bold px-4 md:px-6 py-3 shadow-cta hover:bg-teal hover:text-teal-foreground transition-colors"}
        >
          <Phone />
          {label ? (
            <span>{label}</span>
          ) : (
            <>
              <span className="hidden sm:inline">NOUS APPELER</span>
              <span className="sm:hidden">Appeler</span>
            </>
          )}
        </button>
      </DialogTrigger>

      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle className="text-brand uppercase">Appelez le site le plus proche</DialogTitle>
        </DialogHeader>
        <AgencyList />
      </DialogContent>
    </Dialog>
  );
}

/** Bloc hero : bouton qui déplie la liste des 9 sites */
export function HeroAgencies() {
  const [open, setOpen] = useState(false);
  return (
    <div className="mt-8 rounded-2xl bg-white/5 border border-white/15 overflow-hidden">
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
        className="w-full px-5 py-4 bg-white/10 hover:bg-white/20 transition-colors flex items-center justify-between gap-4 text-sm font-bold uppercase tracking-widest text-teal"
      >
        <span className="flex items-center gap-2">
          <Phone className="w-4 h-4" /> Appelez l'agence la plus proche
        </span>
        <span className={`text-xl leading-none transition-transform ${open ? "rotate-45" : ""}`}>+</span>
      </button>
      {open && (
        <ul className="divide-y divide-white/10">
          {AGENCIES.map((a) => (
            <li key={a.city}>
              <a
                href={`tel:${a.tel.replace(/\s/g, "")}`}
                className="flex items-center justify-between gap-4 px-5 py-3 hover:bg-white/10 transition-colors"
              >
                <span className="font-semibold text-white">{a.city}</span>
                <span className="flex items-center gap-2 font-bold text-gold whitespace-nowrap">
                  <Phone className="w-4 h-4" /> {a.tel}
                </span>
              </a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}