"use client";

import { useCallback, useEffect, useState } from "react";
import {
  BarChart3,
  BookOpen,
  Copy,
  Dices,
  FileText,
  FolderKanban,
  GitBranch,
  LayoutDashboard,
  Menu,
  PiggyBank,
  Plus,
  SlidersHorizontal,
  Tornado,
  Trash2,
  X,
} from "lucide-react";
import { PlanView } from "@/components/PlanView";
import { Dashboard } from "@/components/Dashboard";
import { MonteCarloDialog } from "@/components/MonteCarloDialog";
import { SensitivityDialog } from "@/components/SensitivityDialog";
import { SpecView } from "@/components/SpecView";
import { SystemParametersView } from "@/components/SystemParametersView";
import { PlanTraceDialog } from "@/components/DetailView";
import { computePlan } from "@/lib/calculations";
import { ProfileMenu } from "@/components/ProfileMenu";
import { PlanProfileFields, emptyProfileDraft, type ProfileDraft } from "@/components/PlanProfileFields";
import { api } from "@/lib/api-client";
import { computeScenarioDiff } from "@/lib/diff";
import type { PlanInput, PlanListItem, ScenarioMeta } from "@/lib/types";
import type { PlanComputed } from "@/lib/calculations";

interface ScenarioDetail {
  plan: PlanInput; // das Szenario selbst (berechenbare Einheit)
  computed: PlanComputed;
  base: PlanInput | null; // Eltern-Szenario als Vergleichsbasis
  meta: ScenarioMeta & { planName: string };
}

export function AppShell({ username }: { username: string }) {
  const [plans, setPlans] = useState<PlanListItem[]>([]);
  const [selectedScenarioId, setSelectedScenarioId] = useState<string | null>(null);
  const [detail, setDetail] = useState<ScenarioDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [showNewPlan, setShowNewPlan] = useState(false);
  const [copyFrom, setCopyFrom] = useState<ScenarioMeta | null>(null);
  const [showSpec, setShowSpec] = useState(false);
  const [showCharts, setShowCharts] = useState(false);
  const [showMonteCarlo, setShowMonteCarlo] = useState(false);
  const [showSensitivity, setShowSensitivity] = useState(false);
  const [showSystemParams, setShowSystemParams] = useState(false);
  const [showPlanTraces, setShowPlanTraces] = useState(false);
  // Sprungmarke in die SPEZIFIKATION, gesetzt aus einem Rechenweg heraus.
  const [specAnchor, setSpecAnchor] = useState<string | null>(null);

  function openSpecAt(anchor: string) {
    setSpecAnchor(anchor);
    setShowSpec(true);
    setShowSystemParams(false);
    setSelectedScenarioId(null);
  }

  const loadPlans = useCallback(async () => {
    const data = await api.get<{ plans: PlanListItem[] }>("/api/plans");
    setPlans(data.plans);
    return data.plans;
  }, []);

  // silent = Hintergrund-Refresh ohne Loading-Umschaltung: die PlanView bleibt montiert,
  // damit die Scrollposition (z. B. nach dem Schliessen eines Popups) erhalten bleibt.
  const loadDetail = useCallback(async (scenarioId: string, silent = false) => {
    if (!silent) setLoading(true);
    try {
      setDetail(await api.get<ScenarioDetail>(`/api/scenarios/${scenarioId}`));
    } finally {
      if (!silent) setLoading(false);
    }
  }, []);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- asynchroner Datenabruf beim Mount
    loadPlans().finally(() => setLoading(false));
  }, [loadPlans]);

  useEffect(() => {
    if (selectedScenarioId) {
      // eslint-disable-next-line react-hooks/set-state-in-effect -- asynchroner Datenabruf
      loadDetail(selectedScenarioId);
    } else {
      setDetail(null);
    }
  }, [selectedScenarioId, loadDetail]);

  function refreshCurrent() {
    if (selectedScenarioId) loadDetail(selectedScenarioId, true);
  }

  function openScenario(id: string) {
    setSelectedScenarioId(id);
    setShowSpec(false);
    setShowSystemParams(false);
    setSidebarOpen(false);
  }

  async function handleDeletePlan(id: string) {
    if (!confirm("Diesen Plan mit ALLEN Szenarien wirklich loeschen?")) return;
    await api.delete(`/api/plans/${id}`);
    const rest = await loadPlans();
    if (!rest.some((p) => p.scenarios.some((s) => s.id === selectedScenarioId))) {
      setSelectedScenarioId(null);
    }
  }

  async function handleDeleteScenario(s: ScenarioMeta) {
    if (!confirm(`Szenario "${s.name}" wirklich loeschen?`)) return;
    try {
      await api.delete(`/api/scenarios/${s.id}`);
    } catch (e) {
      alert(e instanceof Error ? e.message : "Loeschen fehlgeschlagen.");
      return;
    }
    await loadPlans();
    if (selectedScenarioId === s.id) setSelectedScenarioId(null);
  }

  const activePlan = plans.find((p) => p.scenarios.some((s) => s.id === selectedScenarioId)) ?? null;

  const sidebar = (
    <div className="flex h-full flex-col">
      <div className="flex items-center gap-2 px-4 py-4">
        <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-accent">
          <PiggyBank className="h-5 w-5 text-accent-fg" />
        </div>
        <span className="text-sm font-semibold text-fg">FPT</span>
      </div>

      <nav className="flex flex-1 flex-col gap-1 overflow-y-auto px-3 pb-4">
        <button
          type="button"
          onClick={() => {
            setSelectedScenarioId(null);
            setShowSpec(false);
            setShowSystemParams(false);
            setSidebarOpen(false);
          }}
          className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium ${
            selectedScenarioId === null && !showSpec && !showSystemParams ? "bg-accent-soft text-accent-soft-fg" : "text-muted hover:bg-surface-2"
          }`}
        >
          <LayoutDashboard className="h-4 w-4" />
          Uebersicht
        </button>

        <div className="mt-4 flex items-center justify-between px-3">
          <span className="text-[11px] font-semibold uppercase tracking-wide text-faint">Plaene</span>
          <button
            type="button"
            onClick={() => setShowNewPlan(true)}
            aria-label="Neuen Plan erstellen"
            className="rounded-md p-1 text-accent hover:bg-accent-soft"
          >
            <Plus className="h-4 w-4" />
          </button>
        </div>
        {plans.length === 0 && <p className="px-3 py-2 text-xs text-faint">Noch keine Plaene.</p>}

        {plans.map((p) => (
          <div key={p.id} className="mb-1">
            <div className="group flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold text-fg">
              <FolderKanban className="h-3.5 w-3.5 shrink-0 text-faint" />
              <span className="min-w-0 flex-1 truncate" title={p.name}>{p.name}</span>
              <button
                type="button"
                aria-label="Plan loeschen"
                onClick={() => handleDeletePlan(p.id)}
                className="rounded p-0.5 text-faint opacity-0 hover:bg-danger-soft hover:text-danger group-hover:opacity-100"
              >
                <Trash2 className="h-3.5 w-3.5" />
              </button>
            </div>
            <ScenarioTree
              scenarios={p.scenarios}
              parentId={null}
              depth={0}
              selectedId={selectedScenarioId}
              onSelect={openScenario}
              onCopy={setCopyFrom}
              onDelete={handleDeleteScenario}
            />
          </div>
        ))}

        <div className="mt-4 flex flex-col gap-1 border-t border-border pt-3">
          <button
            type="button"
            onClick={() => {
              setShowSystemParams(true);
              setShowSpec(false);
              setSelectedScenarioId(null);
              setSidebarOpen(false);
            }}
            className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-medium ${
              showSystemParams ? "bg-accent-soft text-accent-soft-fg" : "text-muted hover:bg-surface-2"
            }`}
          >
            <SlidersHorizontal className="h-4 w-4 shrink-0" />
            Systemparameter
          </button>
          <button
            type="button"
            onClick={() => {
              setShowSpec(true);
              setSpecAnchor(null);
              setShowSystemParams(false);
              setSelectedScenarioId(null);
              setSidebarOpen(false);
            }}
            className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-medium ${
              showSpec ? "bg-accent-soft text-accent-soft-fg" : "text-muted hover:bg-surface-2"
            }`}
          >
            <FileText className="h-4 w-4 shrink-0" />
            SPEZIFIKATION
          </button>
        </div>
      </nav>
    </div>
  );

  const diff = detail ? computeScenarioDiff(detail.plan, detail.base) : null;

  return (
    <div className="flex min-h-screen w-full">
      <aside className="hidden w-64 shrink-0 border-r border-border bg-surface lg:block">{sidebar}</aside>

      {sidebarOpen && (
        <div className="fixed inset-0 z-40 lg:hidden">
          <div className="absolute inset-0 bg-black/40" onClick={() => setSidebarOpen(false)} />
          <aside className="absolute left-0 top-0 h-full w-72 border-r border-border bg-surface shadow-xl">
            <button
              type="button"
              onClick={() => setSidebarOpen(false)}
              aria-label="Menue schliessen"
              className="absolute right-2 top-3 rounded-md p-1.5 text-faint hover:bg-surface-2"
            >
              <X className="h-4 w-4" />
            </button>
            {sidebar}
          </aside>
        </div>
      )}

      <div className="flex min-w-0 flex-1 flex-col">
        <header className="flex items-center gap-3 border-b border-border bg-surface px-4 py-3">
          <button
            type="button"
            onClick={() => setSidebarOpen(true)}
            aria-label="Menue oeffnen"
            className="rounded-lg border border-border p-2 text-muted lg:hidden"
          >
            <Menu className="h-4 w-4" />
          </button>
          <h1 className="min-w-0 flex-1 truncate text-base font-semibold text-fg">
            {showSystemParams
              ? "Systemparameter"
              : showSpec
              ? "Spezifikation"
              : detail
                ? `${detail.meta.planName} · ${detail.meta.name}`
                : "Uebersicht"}
          </h1>
          <ProfileMenu username={username} />
        </header>

        <main className="flex-1 px-4 py-6 lg:px-8">
          {showSystemParams && <SystemParametersView />}

          {showSpec && <SpecView anchor={specAnchor} />}

          {!showSpec && !showSystemParams && loading && <p className="text-sm text-muted">Laedt…</p>}

          {!showSpec && !showSystemParams && !loading && selectedScenarioId === null && (
            <DashboardHome
              username={username}
              plans={plans}
              onSelect={openScenario}
              onCreate={() => setShowNewPlan(true)}
              onDelete={handleDeletePlan}
            />
          )}

          {!showSpec && !showSystemParams && !loading && detail && selectedScenarioId && (
            <div className="flex flex-col gap-6">
              <div className="flex flex-wrap items-center gap-2">
                <button
                  type="button"
                  onClick={() => setCopyFrom(detail.meta)}
                  className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted hover:bg-surface-2"
                >
                  <Copy className="h-4 w-4" />
                  Neues Szenario aus diesem
                </button>
                {!detail.meta.isBase && (
                  <button
                    type="button"
                    onClick={() => handleDeleteScenario(detail.meta)}
                    className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted hover:border-danger hover:bg-danger-soft hover:text-danger"
                  >
                    <Trash2 className="h-4 w-4" />
                    Szenario loeschen
                  </button>
                )}
                {detail.plan.phases.length > 0 && (
                  <>
                    <button
                      type="button"
                      onClick={() => setShowCharts(true)}
                      className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted hover:bg-surface-2"
                    >
                      <BarChart3 className="h-4 w-4" />
                      Grafiken
                    </button>
                    <button
                      type="button"
                      onClick={() => setShowMonteCarlo(true)}
                      className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted hover:bg-surface-2"
                    >
                      <Dices className="h-4 w-4" />
                      Monte-Carlo-Simulation
                    </button>
                    <button
                      type="button"
                      onClick={() => setShowSensitivity(true)}
                      className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted hover:bg-surface-2"
                    >
                      <Tornado className="h-4 w-4" />
                      Einflussfaktoren berechnen
                    </button>
                    <button
                      type="button"
                      onClick={() => setShowPlanTraces(true)}
                      title="Wie wird gerechnet? Plan-weite Grössen wie Deflatoren, AHV-Karriere und Ruinalter"
                      className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted hover:bg-surface-2"
                    >
                      <BookOpen className="h-4 w-4" />
                      Rechenwege
                    </button>
                  </>
                )}
                {diff && detail.base && (
                  <span className="ml-auto flex items-center gap-1.5 rounded-lg border border-diff bg-diff-soft px-3 py-1.5 text-xs font-medium text-diff">
                    <GitBranch className="h-3.5 w-3.5" />
                    {diff.total === 0
                      ? "Unveraendert gegenueber der Vorlage"
                      : `${diff.total} Abweichung${diff.total === 1 ? "" : "en"} gegenueber der Vorlage`}
                  </span>
                )}
              </div>

              <PlanView
                plan={detail.plan}
                computed={detail.computed}
                diff={diff}
                onChanged={refreshCurrent}
                onOpenSpec={openSpecAt}
              />
            </div>
          )}
        </main>
      </div>

      {showNewPlan && (
        <PlanDialog
          onCreate={async (name, profile) => {
            const { scenario } = await api.post<{ plan: { id: string }; scenario: { id: string } }>(
              "/api/plans",
              { name, ...profile }
            );
            setShowNewPlan(false);
            await loadPlans();
            openScenario(scenario.id);
          }}
          onClose={() => setShowNewPlan(false)}
        />
      )}

      {showCharts && detail && (
        <ChartsDialog onClose={() => setShowCharts(false)} title={`Grafiken · ${detail.meta.name}`}>
          <Dashboard
            plan={detail.plan}
            computed={detail.computed}
            siblings={(activePlan?.scenarios ?? []).filter((s) => s.id !== detail.meta.id)}
          />
        </ChartsDialog>
      )}

      {showMonteCarlo && detail && (
        <MonteCarloDialog
          plan={detail.plan}
          computed={detail.computed}
          meta={detail.meta}
          scenarios={activePlan?.scenarios ?? [detail.meta]}
          onClose={() => setShowMonteCarlo(false)}
        />
      )}

      {showSensitivity && detail && (
        <SensitivityDialog plan={detail.plan} onClose={() => setShowSensitivity(false)} />
      )}

      {showPlanTraces && detail && (
        <PlanTraceDialog
          computed={computePlan(detail.plan, undefined, { explain: true })}
          onClose={() => setShowPlanTraces(false)}
          onOpenSpec={openSpecAt}
        />
      )}

      {copyFrom && (
        <CopyScenarioDialog
          source={copyFrom}
          onClose={() => setCopyFrom(null)}
          onCreate={async (name) => {
            const { scenarioId } = await api.post<{ scenarioId: string }>(
              `/api/scenarios/${copyFrom.id}/copy`,
              { name }
            );
            setCopyFrom(null);
            await loadPlans();
            openScenario(scenarioId);
          }}
        />
      )}
    </div>
  );
}

// Breiter Dialog fuer den Analyse-Bereich (Grafiken).
function ChartsDialog({
  title,
  children,
  onClose,
}: {
  title: string;
  children: React.ReactNode;
  onClose: () => void;
}) {
  return (
    <div className="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/40 px-4 py-8" onClick={onClose}>
      <div
        onClick={(e) => e.stopPropagation()}
        className="flex w-full max-w-5xl flex-col gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl"
      >
        <div className="flex items-center justify-between">
          <h2 className="flex items-center gap-2 text-base font-semibold text-fg">
            <BarChart3 className="h-5 w-5 text-accent" /> {title}
          </h2>
          <button type="button" onClick={onClose} aria-label="Schliessen" className="rounded-md p-1 text-faint hover:bg-surface-2">
            <X className="h-4 w-4" />
          </button>
        </div>
        {children}
      </div>
    </div>
  );
}

// Rekursiver Szenario-Baum: Kinder werden eingerueckt, damit Sub-Szenarien sichtbar sind.
function ScenarioTree({
  scenarios,
  parentId,
  depth,
  selectedId,
  onSelect,
  onCopy,
  onDelete,
}: {
  scenarios: ScenarioMeta[];
  parentId: string | null;
  depth: number;
  selectedId: string | null;
  onSelect: (id: string) => void;
  onCopy: (s: ScenarioMeta) => void;
  onDelete: (s: ScenarioMeta) => void;
}) {
  const level = scenarios.filter((s) => (s.parentScenarioId ?? null) === parentId);
  if (level.length === 0) return null;
  return (
    <>
      {level.map((s) => (
        <div key={s.id}>
          <div
            className={`group flex items-center gap-1.5 rounded-lg py-1.5 pr-1.5 text-sm ${
              selectedId === s.id ? "bg-accent-soft font-medium text-accent-soft-fg" : "text-muted hover:bg-surface-2"
            }`}
            style={{ paddingLeft: `${12 + depth * 14}px` }}
          >
            <button type="button" onClick={() => onSelect(s.id)} className="flex min-w-0 flex-1 items-center gap-1.5 text-left">
              {s.isBase ? (
                <PiggyBank className="h-3.5 w-3.5 shrink-0" />
              ) : (
                <GitBranch className="h-3.5 w-3.5 shrink-0" />
              )}
              <span className="min-w-0 flex-1 truncate" title={s.name}>{s.name}</span>
            </button>
            <button
              type="button"
              aria-label="Kopie erstellen"
              title="Neues Szenario aus diesem"
              onClick={() => onCopy(s)}
              className="rounded p-0.5 text-faint opacity-0 hover:bg-accent-soft hover:text-accent group-hover:opacity-100"
            >
              <Copy className="h-3.5 w-3.5" />
            </button>
            {!s.isBase && (
              <button
                type="button"
                aria-label="Szenario loeschen"
                onClick={() => onDelete(s)}
                className="rounded p-0.5 text-faint opacity-0 hover:bg-danger-soft hover:text-danger group-hover:opacity-100"
              >
                <Trash2 className="h-3.5 w-3.5" />
              </button>
            )}
          </div>
          <ScenarioTree
            scenarios={scenarios}
            parentId={s.id}
            depth={depth + 1}
            selectedId={selectedId}
            onSelect={onSelect}
            onCopy={onCopy}
            onDelete={onDelete}
          />
        </div>
      ))}
    </>
  );
}

// Startansicht: Begruessung + Plan-Kacheln (Klick oeffnet das Basisszenario).
function DashboardHome({
  username,
  plans,
  onSelect,
  onCreate,
  onDelete,
}: {
  username: string;
  plans: PlanListItem[];
  onSelect: (scenarioId: string) => void;
  onCreate: () => void;
  onDelete: (id: string) => void;
}) {
  return (
    <div className="flex flex-col gap-6">
      <div>
        <h2 className="text-xl font-semibold text-fg">Willkommen, {username}</h2>
        <p className="mt-1 text-sm text-muted">
          Waehlen Sie einen Plan oder erstellen Sie einen neuen. Jeder Plan enthaelt ein Basisszenario
          und beliebig viele Varianten davon.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {plans.map((p) => {
          const base = p.scenarios.find((s) => s.isBase) ?? p.scenarios[0];
          const others = p.scenarios.length - 1;
          return (
            <div
              key={p.id}
              className="group relative flex cursor-pointer flex-col gap-2 rounded-xl border border-border bg-surface p-4 shadow-sm transition-shadow hover:shadow-md"
              onClick={() => base && onSelect(base.id)}
            >
              <div className="flex items-center gap-2">
                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent-soft">
                  <FolderKanban className="h-5 w-5 text-accent-soft-fg" />
                </div>
                <div className="min-w-0 flex-1">
                  <div className="truncate font-medium text-fg">{p.name}</div>
                  <div className="text-xs text-muted">
                    Basisszenario{others > 0 ? ` + ${others} Variante${others === 1 ? "" : "n"}` : ""}
                  </div>
                </div>
                <button
                  type="button"
                  aria-label="Plan loeschen"
                  onClick={(e) => {
                    e.stopPropagation();
                    onDelete(p.id);
                  }}
                  className="rounded-md p-1.5 text-faint opacity-0 transition-opacity hover:bg-danger-soft hover:text-danger group-hover:opacity-100"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            </div>
          );
        })}

        <button
          type="button"
          onClick={onCreate}
          className="flex min-h-20 items-center justify-center gap-2 rounded-xl border border-dashed border-accent bg-accent-soft text-sm font-medium text-accent-soft-fg hover:bg-accent-soft"
        >
          <Plus className="h-4 w-4" />
          Neuer Plan
        </button>
      </div>
    </div>
  );
}

function PlanDialog({
  onCreate,
  onClose,
}: {
  onCreate: (name: string, profile: ProfileDraft) => void;
  onClose: () => void;
}) {
  const [name, setName] = useState("Meine Planung");
  const [draft, setDraft] = useState<ProfileDraft>(emptyProfileDraft);
  const [saving, setSaving] = useState(false);

  return (
    <div className="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/40 px-4 py-8" onClick={onClose}>
      <div
        onClick={(e) => e.stopPropagation()}
        className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl"
      >
        <h2 className="text-base font-semibold text-fg">Neuen Plan erstellen</h2>
        <p className="text-xs text-muted">
          Es wird automatisch ein <strong className="text-fg">Basisszenario</strong> angelegt. Weitere
          Szenarien entstehen spaeter als Kopien davon.
        </p>
        <div>
          <label className="mb-1 block text-xs font-medium text-muted">Name des Plans</label>
          <input
            autoFocus
            className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Name des Plans"
          />
        </div>
        <PlanProfileFields draft={draft} onChange={setDraft} />
        <div className="flex gap-2">
          <button
            type="button"
            disabled={saving}
            onClick={() => {
              setSaving(true);
              onCreate(name.trim() || "Plan", draft);
            }}
            className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-fg shadow-sm hover:bg-accent-hover disabled:opacity-50"
          >
            {saving ? "..." : "Erstellen"}
          </button>
          <button
            type="button"
            onClick={onClose}
            className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted hover:bg-surface-2"
          >
            Abbrechen
          </button>
        </div>
      </div>
    </div>
  );
}

function CopyScenarioDialog({
  source,
  onCreate,
  onClose,
}: {
  source: ScenarioMeta;
  onCreate: (name: string) => void;
  onClose: () => void;
}) {
  const [name, setName] = useState(`${source.name} – Variante`);
  const [saving, setSaving] = useState(false);
  return (
    <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4" onClick={onClose}>
      <div
        onClick={(e) => e.stopPropagation()}
        className="flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-border bg-surface p-6 shadow-xl"
      >
        <h2 className="text-base font-semibold text-fg">Neues Szenario</h2>
        <p className="text-xs text-muted">
          Vollstaendige Kopie von <strong className="text-fg">{source.name}</strong>. Aenderungen darin
          werden anschliessend farblich hervorgehoben.
        </p>
        <input
          autoFocus
          className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Name des Szenarios"
        />
        <div className="flex gap-2">
          <button
            type="button"
            disabled={saving}
            onClick={() => {
              setSaving(true);
              onCreate(name.trim() || "Szenario");
            }}
            className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-fg shadow-sm hover:bg-accent-hover disabled:opacity-50"
          >
            {saving ? "..." : "Erstellen"}
          </button>
          <button
            type="button"
            onClick={onClose}
            className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted hover:bg-surface-2"
          >
            Abbrechen
          </button>
        </div>
      </div>
    </div>
  );
}