"use client";

import { useEffect, useState } from "react";
import {
  CookiePreferencesState,
  DEFAULT_COOKIE_PREFERENCES,
  readCookiePreferences,
  writeCookiePreferences,
} from "@/lib/cookies/preferences";
import { useSiteText } from "@/components/providers/site-text-provider";

export function CookiePreferences() {
  const { t } = useSiteText();
  const [preferences, setPreferences] = useState<CookiePreferencesState>(DEFAULT_COOKIE_PREFERENCES);
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    const frame = window.requestAnimationFrame(() => {
      const stored = readCookiePreferences();
      if (stored) {
        setPreferences(stored);
      }
    });

    return () => window.cancelAnimationFrame(frame);
  }, []);

  const save = (next: CookiePreferencesState) => {
    setPreferences(next);
    writeCookiePreferences(next);
    setSaved(true);
    window.setTimeout(() => setSaved(false), 2200);
  };

  return (
    <div className="space-y-5">
      <article className="rounded-xl border border-[#ffe8e8] bg-[#fffafa] p-4">
        <div className="flex items-start justify-between gap-3">
          <div>
            <h3 className="font-semibold text-[var(--foreground)]">{t("cookie.pref.requiredTitle")}</h3>
            <p className="mt-1 text-sm text-[var(--muted)]">{t("cookie.pref.requiredText")}</p>
          </div>
          <span className="rounded-full border border-[#ffd8d8] bg-white px-3 py-1 text-xs font-semibold text-[var(--accent-3)]">
            {t("cookie.pref.requiredBadge")}
          </span>
        </div>
      </article>

      <article className="rounded-xl border border-[#ffe8e8] bg-[#fffafa] p-4">
        <div className="flex items-start justify-between gap-4">
          <div>
            <h3 className="font-semibold text-[var(--foreground)]">{t("cookie.pref.analyticsTitle")}</h3>
            <p className="mt-1 text-sm text-[var(--muted)]">{t("cookie.pref.analyticsText")}</p>
          </div>
          <label className="inline-flex items-center gap-2 text-sm font-medium text-[var(--foreground)]">
            <input
              type="checkbox"
              checked={preferences.analytics}
              onChange={(event) =>
                setPreferences((current) => ({ ...current, analytics: event.target.checked }))
              }
            />
            {t("cookie.pref.enable")}
          </label>
        </div>
      </article>

      <div className="flex flex-wrap items-center gap-3">
        <button
          type="button"
          onClick={() => save(preferences)}
          className="rounded-xl bg-[var(--accent)] px-4 py-2 text-sm font-semibold text-white hover:bg-[var(--accent-2)]"
        >
          {t("cookie.pref.save")}
        </button>
        <button
          type="button"
          onClick={() => save({ ...preferences, analytics: false })}
          className="rounded-xl border border-[#ffd8d8] bg-white px-4 py-2 text-sm font-semibold text-[var(--foreground)]"
        >
          {t("cookie.pref.rejectAll")}
        </button>
        <button
          type="button"
          onClick={() => save({ ...preferences, analytics: true })}
          className="rounded-xl border border-[#ffd8d8] bg-white px-4 py-2 text-sm font-semibold text-[var(--foreground)]"
        >
          {t("cookie.pref.acceptAll")}
        </button>
      </div>

      {saved ? (
        <p className="text-sm font-medium text-[var(--accent)]">{t("cookie.pref.saved")}</p>
      ) : null}
    </div>
  );
}