"use client";

import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import { createPortal } from "react-dom";
import Link from "next/link";
import { Button } from "@/components/ui/Button";
import {
  allAccepted,
  allRejected,
  CONSENT_OPEN_EVENT,
  CONSENT_VERSION,
  type Consent,
  type OptionalCategory,
} from "@/lib/consent";
import { getServerSnapshot, getSnapshot, subscribe, writeConsent } from "./consent-store";

export type CookieTexts = {
  title: string;
  description: string;
  acceptAll: string;
  rejectAll: string;
  customize: string;
  save: string;
  back: string;
  policyLabel: string;
  policyHref: string;
  categories: { id: "necessary" | OptionalCategory; label: string; description: string }[];
};

export function CookieConsent({ texts }: { texts: CookieTexts }) {
  const consent = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
  const [prefsOpen, setPrefsOpen] = useState(false);
  const [forcedOpen, setForcedOpen] = useState(false);
  const [draft, setDraft] = useState<Record<OptionalCategory, boolean>>({
    analytics: false,
    marketing: false,
  });
  const headingId = useId();
  const descId = useId();
  const panelRef = useRef<HTMLDivElement>(null);

  // Réouverture depuis le pied de page (« Gérer les témoins »).
  useEffect(() => {
    const onOpen = () => {
      const current = getSnapshot();
      if (current) setDraft({ analytics: current.analytics, marketing: current.marketing });
      setForcedOpen(true);
      setPrefsOpen(true);
    };
    window.addEventListener(CONSENT_OPEN_EVENT, onOpen);
    return () => window.removeEventListener(CONSENT_OPEN_EVENT, onOpen);
  }, []);

  useEffect(() => {
    if (prefsOpen) panelRef.current?.focus();
  }, [prefsOpen]);

  if (consent === null) return null; // rendu serveur / hydratation : rien
  const visible = consent === undefined || forcedOpen;
  if (!visible) return null;

  const openPrefs = () => {
    if (consent) setDraft({ analytics: consent.analytics, marketing: consent.marketing });
    setPrefsOpen(true);
  };
  const decide = (c: Consent) => {
    writeConsent(c);
    setPrefsOpen(false);
    setForcedOpen(false);
  };
  const saveDraft = () =>
    decide({ version: CONSENT_VERSION, date: new Date().toISOString(), necessary: true, ...draft });

  const panel = (
    <div
      role="dialog"
      aria-modal={prefsOpen ? "true" : undefined}
      aria-labelledby={headingId}
      aria-describedby={descId}
      className={`fixed inset-x-0 bottom-0 z-[60] p-3 sm:p-5 ${prefsOpen ? "bg-navy-900/40 top-0 flex items-end sm:items-center sm:justify-center" : ""}`}
      onKeyDown={(e) => {
        if (e.key === "Escape" && prefsOpen) {
          if (consent) {
            setPrefsOpen(false);
            setForcedOpen(false);
          } else setPrefsOpen(false);
        }
      }}
    >
      <div
        ref={panelRef}
        tabIndex={-1}
        className="border-pale-300/70 bg-ivory-50 mx-auto w-full max-w-[44rem] rounded-[var(--radius-lg)] border p-5 shadow-lg outline-none sm:p-7"
      >
        <h2 id={headingId} className="text-h4">
          {texts.title}
        </h2>
        <p id={descId} className="text-ink-700 mt-2 text-sm">
          {texts.description}{" "}
          <Link
            href={texts.policyHref}
            className="hover:text-navy-900 underline underline-offset-4"
          >
            {texts.policyLabel}
          </Link>
        </p>

        {prefsOpen ? (
          <ul className="mt-5 flex flex-col gap-3" aria-label="Catégories de témoins">
            {texts.categories.map((cat) => {
              const required = cat.id === "necessary";
              const checked = required ? true : draft[cat.id as OptionalCategory];
              const inputId = `${headingId}-${cat.id}`;
              return (
                <li key={cat.id} className="flex items-start gap-3 rounded-md bg-white/60 p-3">
                  <input
                    id={inputId}
                    type="checkbox"
                    className="mt-1 h-4 w-4 accent-slate-500"
                    checked={checked}
                    disabled={required}
                    aria-describedby={`${inputId}-desc`}
                    onChange={(e) =>
                      !required && setDraft((d) => ({ ...d, [cat.id]: e.target.checked }))
                    }
                  />
                  <div>
                    <label htmlFor={inputId} className="text-ink-900 block text-sm font-medium">
                      {cat.label}
                      {required ? (
                        <span className="text-ink-500 ml-2 text-xs font-normal">
                          (toujours actifs)
                        </span>
                      ) : null}
                    </label>
                    <p id={`${inputId}-desc`} className="text-ink-700 mt-0.5 text-xs">
                      {cat.description}
                    </p>
                  </div>
                </li>
              );
            })}
          </ul>
        ) : null}

        <div className="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:flex-wrap sm:justify-end">
          {prefsOpen ? (
            <>
              <Button variant="ghost" arrow={false} onClick={() => setPrefsOpen(false)}>
                {texts.back}
              </Button>
              <Button variant="outline" arrow={false} onClick={() => decide(allRejected())}>
                {texts.rejectAll}
              </Button>
              <Button arrow={false} onClick={saveDraft}>
                {texts.save}
              </Button>
            </>
          ) : (
            <>
              <Button variant="ghost" arrow={false} onClick={openPrefs}>
                {texts.customize}
              </Button>
              <Button variant="outline" arrow={false} onClick={() => decide(allRejected())}>
                {texts.rejectAll}
              </Button>
              <Button arrow={false} onClick={() => decide(allAccepted())}>
                {texts.acceptAll}
              </Button>
            </>
          )}
        </div>
      </div>
    </div>
  );

  return createPortal(panel, document.body);
}

export function ManageCookiesButton({
  label,
  className = "",
}: {
  label: string;
  className?: string;
}) {
  return (
    <button
      type="button"
      className={className}
      onClick={() => window.dispatchEvent(new Event(CONSENT_OPEN_EVENT))}
    >
      {label}
    </button>
  );
}