"use client";

import React, { useMemo, useState } from "react";
import { useConsent, type ConsentState } from "./ConsentProvider";

export default function ConsentBanner() {
  const { consent, setConsent } = useConsent();
  const [draft, setDraft] = useState<ConsentState>({ analytics: false, chat: false });

  const shouldShow = useMemo(() => consent === null, [consent]);
  if (!shouldShow) return null;

  const locale = useMemo(() => {
    if (typeof document === "undefined") return "en";
    const match = document.cookie
      .split(";")
      .map((c) => c.trim())
      .find((c) => c.startsWith("NEXT_LOCALE="));
    if (!match) return "en";
    return decodeURIComponent(match.split("=").slice(1).join("=")) || "en";
  }, []);

  const s = locale === "de"
    ? {
        title: "Datenschutz-Einstellungen",
        description:
          "Wir nutzen optionale Dienste (Analytics und Chat), um die Seite zu verbessern. Du kannst deine Auswahl jederzeit ändern.",
        essential: "Essentiell",
        analytics: "Analytics",
        chat: "Chatbot",
        acceptAll: "Alles akzeptieren",
        acceptSelected: "Auswahl akzeptieren",
        rejectAll: "Alles ablehnen",
      }
    : {
        title: "Privacy settings",
        description:
          "We use optional services (analytics and chat) to improve the site. You can change your choice anytime.",
        essential: "Essential",
        analytics: "Analytics",
        chat: "Chatbot",
        acceptAll: "Accept all",
        acceptSelected: "Accept selected",
        rejectAll: "Reject all",
      };

  return (
    <div className="fixed bottom-4 left-4 right-4 z-[60]">
      <div className="max-w-3xl mx-auto bg-white/95 backdrop-blur-xl border border-stone-200 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.18)] p-5">
        <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
          <div className="min-w-0">
            <div className="text-lg font-bold text-stone-900">{s.title}</div>
            <p className="text-sm text-stone-600 mt-1">{s.description}</p>

            <div className="mt-4 space-y-2">
              <div className="flex items-center justify-between gap-3">
                <div className="text-sm font-medium text-stone-800">{s.essential}</div>
                <div className="text-xs text-stone-500">Always on</div>
              </div>

              <label className="flex items-center justify-between gap-3 py-1">
                <span className="text-sm font-medium text-stone-800">{s.analytics}</span>
                <input
                  type="checkbox"
                  checked={draft.analytics}
                  onChange={(e) => setDraft((p) => ({ ...p, analytics: e.target.checked }))}
                  className="w-4 h-4 accent-stone-900"
                />
              </label>

              <label className="flex items-center justify-between gap-3 py-1">
                <span className="text-sm font-medium text-stone-800">{s.chat}</span>
                <input
                  type="checkbox"
                  checked={draft.chat}
                  onChange={(e) => setDraft((p) => ({ ...p, chat: e.target.checked }))}
                  className="w-4 h-4 accent-stone-900"
                />
              </label>
            </div>
          </div>

          <div className="flex flex-col gap-2 shrink-0">
            <button
              onClick={() => setConsent({ analytics: true, chat: true })}
              className="px-4 py-2 rounded-xl bg-stone-900 text-stone-50 font-semibold hover:bg-stone-800 transition-colors"
            >
              {s.acceptAll}
            </button>
            <button
              onClick={() => setConsent(draft)}
              className="px-4 py-2 rounded-xl bg-white border border-stone-200 text-stone-800 font-semibold hover:bg-stone-50 transition-colors"
            >
              {s.acceptSelected}
            </button>
            <button
              onClick={() => setConsent({ analytics: false, chat: false })}
              className="px-4 py-2 rounded-xl bg-transparent text-stone-600 font-semibold hover:text-stone-900 transition-colors"
            >
              {s.rejectAll}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

