/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: components/CookieConsent.tsx
 * Description: Cookie consent banner — records the visitor's choice in a first-party cookie
 *              and can be reopened at any time via the "hilmacorp:cookie-preferences" event
 */

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

export const COOKIE_CONSENT_NAME = "hilmacorp_cookie_consent";
export const COOKIE_PREFERENCES_EVENT = "hilmacorp:cookie-preferences";

interface CookieStrings {
  title: string;
  body: string;
  acceptAll: string;
  essentialOnly: string;
  privacyLink: string;
  note: string;
}

function readConsent(): string | null {
  const match = document.cookie.match(
    new RegExp(`(?:^|; )${COOKIE_CONSENT_NAME}=([^;]*)`)
  );
  return match ? decodeURIComponent(match[1]) : null;
}

function writeConsent(value: "all" | "essential") {
  document.cookie = `${COOKIE_CONSENT_NAME}=${value};path=/;max-age=31536000;samesite=lax`;
}

export default function CookieConsent({
  locale,
  strings,
}: {
  locale: "fr" | "en";
  strings: CookieStrings;
}) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (readConsent() === null) setVisible(true);
    const reopen = () => setVisible(true);
    window.addEventListener(COOKIE_PREFERENCES_EVENT, reopen);
    return () => window.removeEventListener(COOKIE_PREFERENCES_EVENT, reopen);
  }, []);

  if (!visible) return null;

  function choose(value: "all" | "essential") {
    writeConsent(value);
    setVisible(false);
  }

  return (
    <div
      role="dialog"
      aria-modal="false"
      aria-label={strings.title}
      className="fixed inset-x-0 bottom-0 z-[60] px-4 pb-4 sm:px-6 sm:pb-6"
    >
      <div className="mx-auto max-w-3xl rounded-2xl border border-line-strong bg-card p-6 shadow-xl sm:p-7">
        <h2 className="font-display text-lg font-semibold text-ink">{strings.title}</h2>
        <p className="mt-2 text-sm leading-relaxed text-ink-soft">{strings.body}</p>
        <p className="mt-2 text-xs text-ink-faint">{strings.note}</p>
        <div className="mt-5 flex flex-wrap items-center gap-3">
          <button
            type="button"
            onClick={() => choose("all")}
            className="rounded-full bg-ink px-6 py-2.5 text-sm font-medium text-paper transition-colors hover:bg-accent-strong"
          >
            {strings.acceptAll}
          </button>
          <button
            type="button"
            onClick={() => choose("essential")}
            className="rounded-full border border-line-strong px-6 py-2.5 text-sm font-medium text-ink transition-colors hover:border-accent hover:text-accent"
          >
            {strings.essentialOnly}
          </button>
          <Link
            href={`/${locale}/privacy`}
            className="text-sm font-medium text-accent hover:text-accent-strong"
          >
            {strings.privacyLink}
          </Link>
        </div>
      </div>
    </div>
  );
}