"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import {
  ArrowLeft,
  Clock,
  Gift,
  Lock,
  LockOpen,
  Plus,
  Sparkles,
  Trash2,
  X,
} from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";

/* ── Types ───────────────────────────────────────────────────────────────── */

interface Capsule {
  id: string;
  title: string;
  letter: string;
  unlockDate: string;   // ISO date string YYYY-MM-DD
  createdAt: string;    // ISO
  opened: boolean;
  openedAt?: string;
}

const STORAGE_KEY = "mindavio-time-capsules";

/* ── Storage helpers ─────────────────────────────────────────────────────── */

function load(): Capsule[] {
  if (typeof window === "undefined") return [];
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    return raw ? (JSON.parse(raw) as Capsule[]) : [];
  } catch { return []; }
}

function save(capsules: Capsule[]) {
  if (typeof window === "undefined") return;
  localStorage.setItem(STORAGE_KEY, JSON.stringify(capsules));
}

/* ── Helpers ─────────────────────────────────────────────────────────────── */

function isUnlocked(capsule: Capsule): boolean {
  return new Date(capsule.unlockDate + "T00:00:00") <= new Date();
}

function daysUntil(dateStr: string): number {
  const diff = new Date(dateStr + "T00:00:00").getTime() - new Date().setHours(0, 0, 0, 0);
  return Math.max(0, Math.ceil(diff / 86_400_000));
}

function fmtDate(iso: string) {
  return new Date(iso.includes("T") ? iso : iso + "T00:00:00").toLocaleDateString("de-DE", {
    day: "2-digit", month: "long", year: "numeric",
  });
}

function nowMs() {
  return Date.now();
}

function uid() {
  return Math.random().toString(36).slice(2) + Date.now().toString(36);
}

/* ── Write modal ─────────────────────────────────────────────────────────── */

function WriteCapsuleModal({ onSave, onClose }: {
  onSave: (capsule: Omit<Capsule, "id" | "createdAt" | "opened">) => void;
  onClose: () => void;
}) {
  const [title,       setTitle]       = useState("");
  const [letter,      setLetter]      = useState("");
  const [unlockDate,  setUnlockDate]  = useState(() => {
    const d = new Date();
    d.setFullYear(d.getFullYear() + 1);
    return d.toISOString().split("T")[0];
  });
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => { textareaRef.current?.focus(); }, []);

  const minDate = new Date();
  minDate.setDate(minDate.getDate() + 1);
  const minDateStr = minDate.toISOString().split("T")[0];

  const presets = [
    { label: "3 Monate", months: 3 },
    { label: "6 Monate", months: 6 },
    { label: "1 Jahr",   months: 12 },
    { label: "2 Jahre",  months: 24 },
    { label: "5 Jahre",  months: 60 },
  ];

  function applyPreset(months: number) {
    const d = new Date();
    d.setMonth(d.getMonth() + months);
    setUnlockDate(d.toISOString().split("T")[0]);
  }

  function handleSave() {
    if (!title.trim() || !letter.trim()) return;
    onSave({ title: title.trim(), letter: letter.trim(), unlockDate });
    onClose();
  }

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
      onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="w-full max-w-lg bg-[#0e0c15] border border-white/[0.08] rounded-[24px] overflow-hidden flex flex-col max-h-[90vh]">

        {/* Header */}
        <div className="relative px-6 py-5 border-b border-white/[0.06]">
          <h2 className="text-white font-bold text-lg text-center">Zeitkapsel schreiben</h2>
          <p className="text-white/35 text-xs mt-1 px-1">Ein Brief an dein zukünftiges Ich.</p>
          <button onClick={onClose} className="absolute right-6 top-5 w-8 h-8 rounded-lg border border-white/[0.07] bg-white/[0.04] flex items-center justify-center text-white/40 hover:text-white/70 transition-colors">
            <X className="w-4 h-4" />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-6 space-y-5">
          {/* Title */}
          <div>
            <label className="text-white/40 text-xs uppercase tracking-widest font-bold block mb-2">Titel</label>
            <input
              value={title}
              onChange={e => setTitle(e.target.value)}
              placeholder="z.B. An mich in einem Jahr"
              className="w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-center text-white text-sm placeholder:text-white/20 outline-none focus:border-sky-400/40 transition-colors"
            />
          </div>

          {/* Unlock date */}
          <div>
            <label className="text-white/40 text-xs uppercase tracking-widest font-bold block mb-2">Öffnen am</label>
            <div className="flex flex-wrap gap-2 mb-3">
              {presets.map(p => (
                <button key={p.label} onClick={() => applyPreset(p.months)}
                  className="px-3 py-1.5 rounded-lg border border-white/[0.07] bg-white/[0.03] text-white/50 text-xs hover:text-white/80 hover:bg-white/[0.07] transition-all">
                  {p.label}
                </button>
              ))}
            </div>
            <input
              type="date"
              value={unlockDate}
              min={minDateStr}
              onChange={e => setUnlockDate(e.target.value)}
              className="w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-white text-sm outline-none focus:border-white/20 transition-colors [color-scheme:dark]"
            />
            <p className="text-white/25 text-xs mt-2">
              Öffnet in <span className="text-white/50 font-medium">{daysUntil(unlockDate)} Tagen</span> · {fmtDate(unlockDate)}
            </p>
          </div>

          {/* Letter */}
          <div>
            <label className="text-white/40 text-xs uppercase tracking-widest font-bold block mb-2">Dein Brief</label>
            <textarea
              ref={textareaRef}
              value={letter}
              onChange={e => setLetter(e.target.value)}
              placeholder={"Hallo zukünftiges Ich,\n\ngerade ist es... und ich denke, dass...\n\nMeine größten Ziele für das nächste Jahr sind:\n1.\n2.\n3.\n\nIch hoffe, dass du..."}
              rows={10}
              className="w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-white text-sm placeholder:text-white/20 outline-none focus:border-white/20 transition-colors resize-none leading-relaxed"
            />
            <p className="text-white/20 text-xs mt-1 text-right">{letter.length} Zeichen</p>
          </div>
        </div>

        {/* Footer */}
        <div className="flex gap-3 px-6 py-4 border-t border-white/[0.06]">
          <button onClick={onClose}
            className="flex-1 py-3 rounded-xl border border-white/[0.07] bg-white/[0.03] text-white/50 text-sm font-medium hover:bg-white/[0.06] transition-colors">
            Abbrechen
          </button>
          <button
            onClick={handleSave}
            disabled={!title.trim() || !letter.trim()}
            className="flex-1 py-3 rounded-xl bg-sky-500 text-white text-sm font-bold disabled:opacity-30 hover:bg-sky-400 transition-colors flex items-center justify-center gap-2">
            <Lock className="w-4 h-4" />
            Versiegeln
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── Open capsule view ──────────────────────────────────────────────────── */

function OpenCapsuleModal({ capsule, onClose }: { capsule: Capsule; onClose: () => void }) {
  const [now] = useState(nowMs);
  const unlocked = isUnlocked(capsule);
  const daysPast = unlocked
    ? Math.floor((now - new Date(capsule.unlockDate + "T00:00:00").getTime()) / 86_400_000)
    : 0;

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
      onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="w-full max-w-lg bg-[#0e0c15] border border-white/[0.08] rounded-[24px] overflow-hidden flex flex-col max-h-[90vh]">

        {/* Header */}
        <div className="relative overflow-hidden px-6 py-6 border-b border-white/[0.06]"
          style={{ background: unlocked ? "radial-gradient(ellipse at top, rgba(245,158,11,0.12), transparent 60%)" : undefined }}>
          {unlocked && (
            <div className="pointer-events-none absolute inset-0 opacity-20"
              style={{ background: "linear-gradient(180deg, rgba(245,158,11,0.15), transparent)" }} />
          )}
          <div className="relative z-10 flex items-start justify-between gap-4">
            <div className="flex items-center gap-3">
              <div className={cn(
                "w-10 h-10 rounded-[12px] border flex items-center justify-center",
                unlocked ? "bg-amber-500/20 border-amber-500/30" : "bg-white/[0.05] border-white/[0.08]",
              )}>
                {unlocked ? <LockOpen className="w-5 h-5 text-amber-300" /> : <Lock className="w-5 h-5 text-white/30" />}
              </div>
              <div>
                <h2 className="text-white font-bold text-base leading-tight">{capsule.title}</h2>
                <p className="text-white/35 text-xs mt-0.5">
                  Geschrieben am {fmtDate(capsule.createdAt)}
                </p>
              </div>
            </div>
            <button onClick={onClose} className="w-7 h-7 rounded-lg border border-white/[0.07] bg-white/[0.04] flex items-center justify-center text-white/40 hover:text-white/70 transition-colors shrink-0 mt-0.5">
              <X className="w-3.5 h-3.5" />
            </button>
          </div>

          {unlocked && (
            <div className="relative z-10 mt-4 flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 rounded-xl px-3 py-2">
              <Gift className="w-4 h-4 text-amber-400 shrink-0" />
              <p className="text-amber-300/80 text-xs">
                {daysPast === 0 ? "Heute freigegeben!" : `Vor ${daysPast} ${daysPast === 1 ? "Tag" : "Tagen"} freigegeben.`}
              </p>
            </div>
          )}
        </div>

        {/* Letter */}
        <div className="flex-1 overflow-y-auto p-6">
          {unlocked ? (
            <div className="relative">
              <div className="absolute left-0 top-0 bottom-0 w-0.5 rounded-full bg-amber-500/30" />
              <p className="pl-4 text-white/70 text-sm leading-[1.8] whitespace-pre-wrap font-light">
                {capsule.letter}
              </p>
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center py-10 gap-4 text-center">
              <div className="w-16 h-16 rounded-[18px] bg-white/[0.04] border border-white/[0.07] flex items-center justify-center">
                <Lock className="w-8 h-8 text-white/20" />
              </div>
              <div>
                <p className="text-white/40 font-medium mb-1">Noch versiegelt</p>
                <p className="text-white/25 text-sm">
                  Öffnet in <span className="text-white/50 font-bold">{daysUntil(capsule.unlockDate)} Tagen</span><br />
                  am {fmtDate(capsule.unlockDate)}
                </p>
              </div>
              <div className="mt-2 text-white/15 text-xs italic px-6">
                Der Brief wartet auf dich. Komm wieder wenn die Zeit reif ist.
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ── Capsule card ────────────────────────────────────────────────────────── */

function CapsuleCard({
  capsule,
  onOpen,
  onDelete,
}: {
  capsule: Capsule;
  onOpen: () => void;
  onDelete: () => void;
}) {
  const [now] = useState(nowMs);
  const unlocked = isUnlocked(capsule);
  const days = daysUntil(capsule.unlockDate);
  const progress = useMemo(() => {
    const total = new Date(capsule.unlockDate + "T00:00:00").getTime() - new Date(capsule.createdAt).getTime();
    const elapsed = now - new Date(capsule.createdAt).getTime();
    return Math.min(100, Math.max(0, Math.round((elapsed / total) * 100)));
  }, [capsule, now]);

  function handleOpenKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
    if (event.key !== "Enter" && event.key !== " ") return;
    event.preventDefault();
    onOpen();
  }

  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onOpen}
      onKeyDown={handleOpenKeyDown}
      className={cn(
        "group relative w-full text-left rounded-[20px] border overflow-hidden p-5 transition-all duration-300",
        "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400/50",
        "hover:scale-[1.015] hover:-translate-y-0.5",
        unlocked
          ? "border-amber-500/25 bg-[#0e0c15] hover:border-amber-500/40"
          : "border-white/[0.07] bg-white/[0.02] hover:border-white/[0.12]",
      )}
      style={unlocked ? { boxShadow: "0 8px 32px rgba(245,158,11,0.08)" } : undefined}>

      {/* Top glow when unlocked */}
      {unlocked && (
        <div className="pointer-events-none absolute top-0 inset-x-0 h-[2px] bg-gradient-to-r from-transparent via-amber-400/60 to-transparent" />
      )}

      <div className="flex items-start gap-4">
        {/* Icon */}
        <div className={cn(
          "shrink-0 w-11 h-11 rounded-[12px] border flex items-center justify-center transition-transform duration-300 group-hover:scale-110",
          unlocked ? "bg-amber-500/15 border-amber-500/25" : "bg-white/[0.04] border-white/[0.07]",
        )}>
          {unlocked
            ? <LockOpen className="w-5 h-5 text-amber-300" />
            : <Lock className="w-5 h-5 text-white/25" />}
        </div>

        {/* Content */}
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between gap-2">
            <h3 className="text-white font-semibold text-sm leading-tight">{capsule.title}</h3>
            <button
              onClick={e => { e.stopPropagation(); onDelete(); }}
              className="opacity-0 group-hover:opacity-100 w-6 h-6 rounded-lg flex items-center justify-center text-white/25 hover:text-red-400 transition-all shrink-0">
              <Trash2 className="w-3.5 h-3.5" />
            </button>
          </div>

          <p className="text-white/30 text-xs mt-0.5">
            Erstellt {fmtDate(capsule.createdAt)}
          </p>

          {unlocked ? (
            <div className="flex items-center gap-1.5 mt-2">
              <Gift className="w-3 h-3 text-amber-400/70" />
              <span className="text-amber-300/70 text-xs font-medium">Freigegeben · Jetzt lesen</span>
            </div>
          ) : (
            <div className="mt-3">
              <div className="flex justify-between text-[10px] text-white/25 mb-1">
                <span>Öffnet am {fmtDate(capsule.unlockDate)}</span>
                <span>noch {days}d</span>
              </div>
              <div className="h-1 rounded-full bg-white/[0.06] overflow-hidden">
                <div className="h-full rounded-full bg-violet-500/50 transition-all"
                  style={{ width: `${progress}%` }} />
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Locked preview blur */}
      {!unlocked && (
        <div className="mt-4 rounded-lg bg-white/[0.03] border border-white/[0.05] p-3">
          <p className="text-white/10 text-xs select-none blur-sm leading-relaxed line-clamp-2">
            {capsule.letter}
          </p>
        </div>
      )}
    </div>
  );
}

/* ── Page ────────────────────────────────────────────────────────────────── */

export default function TimeCapsulePage() {
  const [capsules,    setCapsules]    = useState<Capsule[]>(() => load());
  const [writeOpen,   setWriteOpen]   = useState(false);
  const [viewCapsule, setViewCapsule] = useState<Capsule | null>(null);

  function addCapsule(data: Omit<Capsule, "id" | "createdAt" | "opened">) {
    const next: Capsule = {
      ...data,
      id: uid(),
      createdAt: new Date().toISOString().split("T")[0],
      opened: false,
    };
    const updated = [next, ...capsules];
    setCapsules(updated);
    save(updated);
  }

  function deleteCapsule(id: string) {
    if (!window.confirm("Zeitkapsel wirklich löschen?")) return;
    const updated = capsules.filter(c => c.id !== id);
    setCapsules(updated);
    save(updated);
  }

  const unlocked = capsules.filter(isUnlocked);
  const locked   = capsules.filter(c => !isUnlocked(c));

  return (
    <div className="min-h-full bg-[#0a0a0d] text-white">

      {/* Hero */}
      <div className="relative overflow-hidden border-b border-white/[0.04]">
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -left-20 -top-20 w-96 h-96 rounded-full opacity-12 blur-3xl"
            style={{ background: "radial-gradient(circle, #7c3aed, transparent 70%)" }} />
          <div className="absolute right-0 bottom-0 w-64 h-64 rounded-full opacity-8 blur-3xl"
            style={{ background: "radial-gradient(circle, #d97706, transparent 70%)" }} />
        </div>

        <div className="relative max-w-2xl mx-auto px-4 sm:px-6 py-10">
          <Link href="/" className="inline-flex items-center gap-1.5 text-white/30 hover:text-white/60 text-sm mb-7 transition-colors group">
            <ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
            Zurück
          </Link>

          <div className="flex items-end gap-5 mb-6">
            <div className="w-14 h-14 rounded-[16px] bg-violet-500/15 border border-violet-500/25 flex items-center justify-center shrink-0"
              style={{ boxShadow: "0 0 32px rgba(124,58,237,0.2)" }}>
              <Clock className="w-7 h-7 text-violet-300" />
            </div>
            <div>
              <p className="text-violet-300/60 text-xs uppercase tracking-widest font-bold mb-1">Persönlich</p>
              <h1 className="text-3xl font-black tracking-tight">
                Zeit<span style={{ background: "linear-gradient(135deg,#a78bfa,#818cf8)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>kapseln</span>
              </h1>
            </div>
          </div>

          <p className="text-white/35 text-sm leading-relaxed max-w-lg">
            Schreibe Briefe an dein zukünftiges Ich — versiegelt bis zu einem Datum das du wählst. Wenn die Zeit kommt, öffnet Mindavio den Brief und zeigt wer du damals warst.
          </p>

          <div className="flex items-center gap-3 mt-6">
            <button
              onClick={() => setWriteOpen(true)}
              className="flex items-center gap-2 px-5 py-2.5 rounded-[12px] bg-violet-600 text-white text-sm font-bold hover:bg-violet-500 transition-colors shadow-[0_8px_24px_rgba(109,40,217,0.3)]">
              <Plus className="w-4 h-4" />
              Neue Kapsel
            </button>
            <div className="flex gap-3 text-white/30 text-sm">
              {unlocked.length > 0 && (
                <span className="flex items-center gap-1.5 text-amber-300/60">
                  <LockOpen className="w-3.5 h-3.5" />
                  {unlocked.length} offen
                </span>
              )}
              {locked.length > 0 && (
                <span className="flex items-center gap-1.5">
                  <Lock className="w-3.5 h-3.5" />
                  {locked.length} versiegelt
                </span>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="max-w-2xl mx-auto px-4 sm:px-6 py-8 space-y-8">

        {/* Unlocked first */}
        {unlocked.length > 0 && (
          <div>
            <div className="flex items-center gap-2 mb-4">
              <Gift className="w-4 h-4 text-amber-400/70" />
              <span className="text-amber-300/60 text-xs uppercase tracking-widest font-bold">Freigegeben — Zeit zum Lesen</span>
            </div>
            <div className="space-y-3">
              {unlocked.map(c => (
                <CapsuleCard key={c.id} capsule={c} onOpen={() => setViewCapsule(c)} onDelete={() => deleteCapsule(c.id)} />
              ))}
            </div>
          </div>
        )}

        {/* Locked */}
        {locked.length > 0 && (
          <div>
            <div className="flex items-center gap-2 mb-4">
              <Lock className="w-4 h-4 text-white/25" />
              <span className="text-white/30 text-xs uppercase tracking-widest font-bold">Versiegelt</span>
            </div>
            <div className="space-y-3">
              {locked.sort((a, b) => new Date(a.unlockDate).getTime() - new Date(b.unlockDate).getTime()).map(c => (
                <CapsuleCard key={c.id} capsule={c} onOpen={() => setViewCapsule(c)} onDelete={() => deleteCapsule(c.id)} />
              ))}
            </div>
          </div>
        )}

        {/* Empty */}
        {capsules.length === 0 && (
          <div className="flex flex-col items-center py-20 gap-6 text-center">
            <div className="w-16 h-16 rounded-[18px] bg-violet-500/[0.07] border border-violet-500/15 flex items-center justify-center">
              <Clock className="w-8 h-8 text-violet-500/30" />
            </div>
            <div>
              <h3 className="text-white/40 font-semibold mb-1">Noch keine Zeitkapseln</h3>
              <p className="text-white/20 text-sm max-w-xs">Schreibe deinen ersten Brief — an dich selbst, in der Zukunft.</p>
            </div>
            <button onClick={() => setWriteOpen(true)}
              className="flex items-center gap-2 px-5 py-2.5 rounded-[12px] bg-violet-500/10 border border-violet-500/20 text-violet-300 text-sm font-medium hover:bg-violet-500/15 transition-colors">
              <Sparkles className="w-4 h-4" />
              Erste Kapsel erstellen
            </button>
          </div>
        )}
      </div>

      {writeOpen   && <WriteCapsuleModal onSave={addCapsule} onClose={() => setWriteOpen(false)} />}
      {viewCapsule && <OpenCapsuleModal capsule={viewCapsule} onClose={() => setViewCapsule(null)} />}
    </div>
  );
}