"use client";

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Waves, MapPin, Keyboard } from "lucide-react";

const INTRO_SKIP_KEY = "trajectories_intro_skip";

interface IntroDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function IntroDialog({ open, onOpenChange }: IntroDialogProps) {
  const [dontShowAgain, setDontShowAgain] = useState(false);

  const handleStart = () => {
    if (dontShowAgain && typeof window !== "undefined") {
      localStorage.setItem(INTRO_SKIP_KEY, "true");
    }
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md rounded-2xl border-slate-600 bg-slate-800/98 shadow-2xl backdrop-blur-sm text-left">
        <DialogHeader className="space-y-3">
          <DialogTitle className="flex items-center gap-3 text-white text-xl">
            <span className="flex size-12 items-center justify-center rounded-2xl bg-gradient-to-br from-teal-400 to-teal-600 text-slate-900 shadow-lg shadow-teal-500/30">
              <Waves className="size-6" />
            </span>
            <span>
              Visualitzador de trajectòries
              <span className="block text-sm font-normal text-slate-400 mt-0.5">
                Mediterrània NW · UPC
              </span>
            </span>
          </DialogTitle>
          <DialogDescription asChild>
            <div className="text-slate-400 space-y-3 text-sm leading-relaxed">
              <p>
                Aquesta eina mostra una{" "}
                <strong className="text-slate-300">simulació lagrangiana</strong>{" "}
                de partícules al Mediterrani nord-occidental: alliberades des de la
                costa catalana i advectades per un camp de corrents. Les dades es
                mostren <strong className="text-slate-300">cada hora</strong> durant
                diversos dies.
              </p>
              <p>
                Metodologia compatible amb{" "}
                <a
                  href="https://oceanparcels.org/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-teal-400 hover:text-teal-300 underline underline-offset-2"
                >
                  Ocean Parcels
                </a>
                : partícules passives; les que toquen costa es marquen com a{" "}
                <strong className="text-slate-300">beached</strong>.
              </p>
            </div>
          </DialogDescription>
        </DialogHeader>

        <div className="grid grid-cols-2 gap-3">
          <div className="rounded-xl border border-slate-600 bg-slate-700/50 p-3 flex items-start gap-2">
            <span className="size-3 rounded-full bg-teal-400 shrink-0 mt-1 shadow-sm shadow-teal-400/40" />
            <div>
              <p className="font-medium text-slate-200 text-sm">Actives</p>
              <p className="text-xs text-slate-500">A l’aigua</p>
            </div>
          </div>
          <div className="rounded-xl border border-slate-600 bg-slate-700/50 p-3 flex items-start gap-2">
            <MapPin className="size-4 shrink-0 mt-0.5 text-red-400" />
            <div>
              <p className="font-medium text-slate-200 text-sm">Beached</p>
              <p className="text-xs text-slate-500">A la costa</p>
            </div>
          </div>
        </div>

        <div className="rounded-xl border border-slate-600 bg-slate-700/30 px-3 py-2 flex items-center gap-2 text-xs text-slate-500">
          <Keyboard className="size-3.5 shrink-0" />
          <span>
            <kbd className="px-1.5 py-0.5 rounded bg-slate-600 text-slate-300 font-mono text-[10px]">←</kbd>{" "}
            <kbd className="px-1.5 py-0.5 rounded bg-slate-600 text-slate-300 font-mono text-[10px]">→</kbd>{" "}
            una hora · Espai: play/pausa
          </span>
        </div>

        <label className="flex items-center gap-2 cursor-pointer text-sm text-slate-500 hover:text-slate-400 transition-colors">
          <input
            type="checkbox"
            checked={dontShowAgain}
            onChange={(e) => setDontShowAgain(e.target.checked)}
            className="rounded border-slate-500 bg-slate-700 text-teal-500 focus:ring-teal-500/50"
          />
          <span>No tornar a mostrar</span>
        </label>

        <DialogFooter className="flex flex-row justify-end gap-2 sm:gap-2">
          <Button
            onClick={handleStart}
            className="rounded-xl bg-teal-500 px-6 hover:bg-teal-400 text-slate-900 font-semibold shadow-lg shadow-teal-500/25"
          >
            Començar
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export function shouldShowIntro(): boolean {
  if (typeof window === "undefined") return true;
  return localStorage.getItem(INTRO_SKIP_KEY) !== "true";
}
