"use client";

// Die Tour: eine kurze Demo statt eines Spotlights.
//
// Bis 0.35 legte sich die Tour über den ECHTEN Bildschirm und hob Bereiche hervor. Das hatte
// zwei Nachteile, die sich nicht beheben liessen: Auf einem frisch angelegten, leeren Plan gab
// es kaum etwas hervorzuheben -- gerade dann, wenn die Tour am nötigsten ist. Und das
// Ausschneiden der Hervorhebung kämpfte dauernd mit Scroll-Containern und Z-Ebenen.
//
// Neu zeigt die Tour einen NACHGEBAUTEN Bildschirm mit erfundenen Zahlen. Er ist bewusst
// keine echte Ansicht, sondern eine Illustration: gerade so detailliert, dass man den Aufbau
// erkennt, und so einfach, dass sie sich in einem Popup erklären lässt. Der Preis ist, dass
// die Attrappe bei UI-Änderungen nachgeführt werden muss -- dafür funktioniert die Tour ab
// der ersten Sekunde und unabhängig davon, was im Plan schon steht.

import { useState } from "react";
import { ArrowLeft, ArrowRight, Sparkles, X } from "lucide-react";
import { Button } from "@/components/ui";

export const TOUR_DONE_KEY = "fpt-tour-done";

type Focus = "none" | "settings" | "figures" | "actions" | "assistant" | "timeline" | "matrix" | "sidebar";

interface TourStep {
  title: string;
  text: string;
  focus: Focus;
}

const STEPS: TourStep[] = [
  {
    title: "Willkommen bei FPT",
    text: "In zwei Minuten siehst du, wie das Tool aufgebaut ist. Alles, was hier steht, sind erfundene Beispielzahlen – dein eigener Plan ist noch leer.",
    focus: "none",
  },
  {
    title: "Oben stellst du ein, unten siehst du das Ergebnis",
    text: "Der Bildschirm hat zwei Hälften. Oben die Steuerung: Grundeinstellungen, Kennzahlen, Schnellaktionen und der Assistent. Unten die Matrix mit allen Zahlen.",
    focus: "none",
  },
  {
    title: "Die Grundeinstellungen",
    text: "Wer plant, ab wann und wie lange. Alter, Startjahr und Inflation gelten für den ganzen Plan; Planungshorizont und Pensionsalter gehören zum Szenario. Je Person führt ein Knopf in die Pensionsplanung.",
    focus: "settings",
  },
  {
    title: "Die Kennzahlen",
    text: "Was unter dem Strich herauskommt: dein Vermögen heute, das Endvermögen nominal und real – und ob das Kapital über die ganze Planung reicht.",
    focus: "figures",
  },
  {
    title: "Der FPT-Assistent",
    text: "Dein Wegweiser. Sieben Schritte führen von der Bestandsaufnahme bis zum fertigen Plan. Jeder Schritt erklärt zuerst, worum es geht, und bietet danach das passende Werkzeug an. Wann ein Schritt erledigt ist, entscheidest du.",
    focus: "assistant",
  },
  {
    title: "Die Zeitachse",
    text: "Deine Planung im Überblick: Lebensphasen, die Zeitpunkte der Pensionierung – und, falls das Geld nicht reicht, das Jahr, in dem es knapp wird.",
    focus: "timeline",
  },
  {
    title: "Die Matrix",
    text: "Das Herz des Tools. Jede Zeile ist ein finanzielles Element, jede Spalte eine Lebensphase. Die schmalen Spalten dazwischen sind die Übergänge – dort entscheidest du, was beim Wechsel geschieht.",
    focus: "matrix",
  },
  {
    title: "Pläne und Szenarien",
    text: "Links verwaltest du alles. Ein Szenario ist eine Variante deines Plans – etwa mit anderem Pensionsalter. Du kannst beliebig viele anlegen und vergleichen.",
    focus: "sidebar",
  },
  {
    title: "Jetzt bist du dran",
    text: "Starte mit dem FPT-Assistenten oben rechts. Schritt 1 ist die Bestandsaufnahme: alles, was du heute besitzt. Von dort führt dich der Assistent weiter.",
    focus: "assistant",
  },
];

export function Tour({ onClose }: { onClose: () => void }) {
  const [index, setIndex] = useState(0);
  const step = STEPS[index];
  const last = index === STEPS.length - 1;

  function finish() {
    try {
      localStorage.setItem(TOUR_DONE_KEY, "1");
    } catch {
      // Privater Modus o. Ä. -- die Tour lässt sich dann eben erneut öffnen.
    }
    onClose();
  }

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-3 sm:p-6">
      <div className="flex h-full max-h-[900px] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-border bg-surface shadow-2xl">
        <header className="flex items-center gap-3 border-b border-border px-4 py-3">
          <Sparkles className="h-4 w-4 shrink-0 text-accent" />
          <div className="min-w-0 flex-1">
            <h2 className="truncate text-sm font-semibold text-fg">{step.title}</h2>
            <p className="text-[11px] text-muted">
              Schritt {index + 1} von {STEPS.length}
            </p>
          </div>
          <button
            type="button"
            onClick={finish}
            aria-label="Tour schliessen"
            className="rounded-lg p-1.5 text-faint hover:bg-surface-2 hover:text-fg"
          >
            <X className="h-4 w-4" />
          </button>
        </header>

        {/* Die Attrappe. Rein illustrativ -- nichts darin ist klickbar. */}
        <div className="min-h-0 flex-1 overflow-auto bg-surface-2/40 p-4">
          <MockScreen focus={step.focus} />
        </div>

        <footer className="border-t border-border px-4 py-3">
          <p className="mb-3 text-sm leading-relaxed text-fg">{step.text}</p>
          <div className="flex items-center gap-2">
            <div className="flex flex-1 gap-1">
              {STEPS.map((_, i) => (
                <div
                  key={i}
                  className={`h-1 flex-1 rounded-full transition-colors ${i <= index ? "bg-accent" : "bg-surface-2"}`}
                />
              ))}
            </div>
            <Button variant="ghost" size="sm" disabled={index === 0} onClick={() => setIndex((i) => i - 1)}>
              <ArrowLeft className="h-4 w-4" /> Zurück
            </Button>
            {last ? (
              <Button size="sm" onClick={finish}>
                <Sparkles className="h-4 w-4" /> Mit dem Assistenten starten
              </Button>
            ) : (
              <Button size="sm" onClick={() => setIndex((i) => i + 1)}>
                Weiter <ArrowRight className="h-4 w-4" />
              </Button>
            )}
          </div>
        </footer>
      </div>
    </div>
  );
}

// --- Die Attrappe ---------------------------------------------------------------------------
//
// Feste, erfundene Zahlen. Sie müssen weder stimmen noch zueinander passen -- ihr einziger
// Zweck ist, den Aufbau greifbar zu machen.

function MockScreen({ focus }: { focus: Focus }) {
  const dim = (area: Focus) => (focus === "none" || focus === area ? "opacity-100" : "opacity-20");
  const ring = (area: Focus) => (focus === area ? "ring-2 ring-accent" : "");

  return (
    <div className="flex gap-3 text-[10px]">
      {/* Seitenleiste */}
      <div
        className={`hidden w-36 shrink-0 flex-col gap-1 rounded-lg border border-border bg-surface p-2 transition-opacity sm:flex ${dim("sidebar")} ${ring("sidebar")}`}
      >
        <div className="mb-1 font-semibold uppercase tracking-wide text-faint">Meine Pläne</div>
        <div className="rounded bg-accent-soft px-1.5 py-1 font-medium text-accent-soft-fg">Familie Muster</div>
        <div className="pl-2 text-muted">Szenarien</div>
        <div className="rounded bg-surface-2 px-1.5 py-0.5 pl-3 text-fg">Basis</div>
        <div className="px-1.5 py-0.5 pl-3 text-muted">Pension mit 62</div>
        <div className="pl-2 text-muted">Effektive Werte</div>
        <div className="pl-2 text-muted">Analysen</div>
        <div className="pl-2 text-muted">Berichte</div>
      </div>

      <div className="flex min-w-0 flex-1 flex-col gap-3">
        {/* Oberer Bereich */}
        <div className="rounded-lg border border-border bg-surface-2/60 p-2">
          <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
            <MockTile title="Grundeinstellungen" cls={`${dim("settings")} ${ring("settings")}`}>
              <div>Anna · 42 J.</div>
              <div>Beat · 45 J.</div>
              <div className="text-faint">Start 2026 · Inflation 1,5 %</div>
              <div className="mt-1 border-t border-border pt-1">Horizont 40 Jahre · bis 2065</div>
              <div className="flex items-center gap-1">
                Pension 65 · Ende 82
                <span className="ml-auto rounded border border-border px-1 text-[9px]">Pensionsplanung</span>
              </div>
            </MockTile>

            <MockTile title="Kennzahlen" cls={`${dim("figures")} ${ring("figures")}`}>
              <MockFigure label="Vermögen heute" value="412'000" />
              <MockFigure label="Endvermögen nominal" value="1'284'000" />
              <MockFigure label="Endvermögen real" value="702'000" />
              <div className="mt-1 rounded bg-success-soft px-1.5 py-0.5 text-success">
                Kapital reicht über die ganze Planung
              </div>
            </MockTile>

            <MockTile title="Schnellaktionen" cls={`${dim("actions")} ${ring("actions")}`}>
              {["Neues Szenario", "Tour", "Änderungshistorie", "Rechenwege", "CSV-Export"].map((a) => (
                <div key={a} className="rounded border border-border px-1.5 py-0.5 text-muted">
                  {a}
                </div>
              ))}
            </MockTile>

            <div
              className={`flex flex-col gap-1 rounded-lg border border-attention bg-attention-soft px-2 py-1.5 transition-opacity ${dim("assistant")} ${ring("assistant")}`}
            >
              <div className="flex items-center gap-1">
                <Sparkles className="h-3 w-3 text-attention-fg" />
                <span className="font-semibold uppercase tracking-wide text-fg">FPT-Assistent</span>
                <span className="ml-auto font-semibold text-muted">2 / 7</span>
              </div>
              {[
                ["3. Lebensphasen", "4 Lebensphasen"],
                ["4. Erwerbsjahre planen", ""],
                ["5. Pensionierung planen", ""],
              ].map(([t, sub]) => (
                <div key={t} className="flex items-start gap-1">
                  <span className="mt-0.5 h-2.5 w-2.5 shrink-0 rounded-sm border border-border bg-surface" />
                  <span className="min-w-0">
                    <span className="block truncate font-semibold text-fg">{t}</span>
                    {sub && <span className="block truncate text-muted">{sub}</span>}
                  </span>
                </div>
              ))}
              {["1. Bestandsaufnahme", "2. Eckdaten"].map((t) => (
                <div key={t} className="flex items-start gap-1 opacity-50">
                  <span className="mt-0.5 flex h-2.5 w-2.5 shrink-0 items-center justify-center rounded-sm bg-success text-[7px] text-white">
                    ✓
                  </span>
                  <span className="truncate text-muted line-through">{t}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Zeitachse */}
          <div
            className={`mt-2 rounded-lg border border-border bg-surface p-2 transition-opacity ${dim("timeline")} ${ring("timeline")}`}
          >
            <div className="mb-1 flex justify-between text-faint">
              <span>2026</span>
              <span>2065</span>
            </div>
            <div className="flex h-4 overflow-hidden rounded">
              <div className="flex w-[45%] items-center justify-center bg-accent/70 text-[8px] text-white">
                Erwerbsjahre
              </div>
              <div className="flex w-[15%] items-center justify-center bg-attention/70 text-[8px] text-white">
                Übergangszeit
              </div>
              <div className="flex w-[40%] items-center justify-center bg-success/60 text-[8px] text-white">
                Ruhestand
              </div>
            </div>
            <div className="mt-1 flex justify-between text-faint">
              <span>Anna 42 · Beat 45</span>
              <span>Pension 65</span>
              <span>Anna 82 · Beat 85</span>
            </div>
          </div>
        </div>

        {/* Matrix */}
        <div
          className={`overflow-hidden rounded-lg border border-border bg-surface transition-opacity ${dim("matrix")} ${ring("matrix")}`}
        >
          <table className="w-full border-collapse">
            <thead>
              <tr className="bg-surface-2">
                <th className="border-b border-r border-border px-2 py-1.5 text-left align-top">
                  <div className="font-semibold uppercase tracking-wide text-faint">Matrix</div>
                  <div className="mt-1 flex gap-1">
                    <span className="rounded border border-dashed border-border px-1 text-[9px] font-normal text-muted">
                      + Element
                    </span>
                    <span className="rounded border border-dashed border-border px-1 text-[9px] font-normal text-muted">
                      + Phase
                    </span>
                  </div>
                </th>
                {["Erwerbsjahre", "Übergang", "Ruhestand I", "Übergang", "Ruhestand II"].map((h, i) => (
                  <th
                    key={i}
                    className={`border-b border-r border-border px-2 py-1.5 text-center font-medium ${
                      h === "Übergang" ? "bg-attention text-attention-fg" : "text-fg"
                    }`}
                  >
                    {h}
                    {h === "Übergang" && <div className="text-[8px] font-normal">2 offen</div>}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Lohn Anna", "96'000", "→", "—", "→", "—"],
                ["Lebenshaltung", "78'000", "→", "72'000", "→", "68'000"],
                ["Pensionskasse Anna", "310'000", "40 % Kapital", "Rente 18'400", "→", "18'400"],
                ["Säule 3a Anna", "84'000", "Bezug mit 64", "—", "→", "—"],
                ["Wertschriften", "120'000", "→", "486'000", "→", "310'000"],
              ].map((row, i) => (
                <tr key={i} className={i % 2 ? "bg-surface-2/40" : ""}>
                  <td className="border-b border-r border-border px-2 py-1 text-fg">{row[0]}</td>
                  {row.slice(1).map((c, j) => (
                    <td
                      key={j}
                      className={`border-b border-r border-border px-2 py-1 text-center tabular-nums ${
                        j % 2 === 1 ? "bg-attention-soft text-attention-soft-fg" : "text-muted"
                      }`}
                    >
                      {c}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function MockTile({ title, cls, children }: { title: string; cls: string; children: React.ReactNode }) {
  return (
    <div className={`flex flex-col gap-0.5 rounded-lg border border-border bg-surface px-2 py-1.5 transition-opacity ${cls}`}>
      <div className="mb-0.5 font-semibold uppercase tracking-wide text-faint">{title}</div>
      {children}
    </div>
  );
}

function MockFigure({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between gap-1">
      <span className="truncate text-muted">{label}</span>
      <span className="shrink-0 font-semibold tabular-nums text-fg">{value}</span>
    </div>
  );
}