"use client";

import Link from "next/link";
import type { Route } from "next";
import { ShieldCheck } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { readCookieConsent, writeCookieConsent } from "@/lib/client/cookie-consent";

export function CookieDisclaimer() {
  const [isDismissed, setIsDismissed] = useState(false);

  if (typeof window === "undefined" || isDismissed || readCookieConsent() != null) {
    return null;
  }

  return (
    <aside
      aria-label="Cookie consent"
      className="fixed inset-x-0 bottom-3 z-[75] px-2 sm:bottom-4 sm:px-4"
      role="dialog"
      aria-live="polite"
    >
      <div className="mx-auto w-full max-w-3xl">
        <div className="glass-panel animate-fade-up rounded-2xl border border-white/15 px-3 py-3 shadow-2xl sm:px-4">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex items-start gap-2.5 pr-2">
              <span className="mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-sky-300/35 bg-sky-400/15 text-sky-100">
                <ShieldCheck className="size-4" />
              </span>
              <p className="text-xs leading-relaxed text-slate-200 sm:text-sm">
                We use essential cookies and local storage to keep video.haus secure and remember
                your preferences. Optional analytics stay off unless you enable them.{" "}
                <Link
                  href={"/cookies" as Route}
                  className="text-sky-200 underline decoration-sky-200/40 underline-offset-2 transition hover:text-white hover:decoration-white/70"
                >
                  Cookie details
                </Link>
              </p>
            </div>
            <div className="flex items-center gap-2">
              <Button
                size="sm"
                variant="outline"
                className="border-white/20 bg-slate-900/60 text-slate-100 hover:bg-slate-800"
                onClick={() => {
                  writeCookieConsent({
                    analytics: false
                  });
                  setIsDismissed(true);
                }}
              >
                Essential Only
              </Button>
              <Button
                size="sm"
                className="bg-sky-300/90 text-slate-950 hover:bg-sky-200"
                onClick={() => {
                  writeCookieConsent({
                    analytics: true
                  });
                  setIsDismissed(true);
                }}
              >
                Allow Analytics
              </Button>
            </div>
          </div>
        </div>
      </div>
    </aside>
  );
}
