/* ============================================================
   HOCHZEITSPLANER — App shell + Tabs + Tweaks
   ============================================================ */

const TABS = [
  { key: "overview",  label: "Übersicht" },
  { key: "wedding",   label: "Hochzeit" },
  { key: "honeymoon", label: "Flitterwochen" },
  { key: "savings",   label: "Sparplan" },
  { key: "deco",      label: "Deko" },
  { key: "import",    label: "Daten" },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFont": "Instrument Serif",
  "bodyFont": "Manrope",
  "accentColor": "wine",
  "showCountdown": true,
  "showHero": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  wine:      { primary: "#7a2929", deep: "#5a1d1d", soft: "#a85656" },
  forest:    { primary: "#2f5d3f", deep: "#1d3d29", soft: "#6a8a6e" },
  twilight:  { primary: "#3b3a6b", deep: "#26254a", soft: "#7878a8" },
  copper:    { primary: "#a85a32", deep: "#7a3f1e", soft: "#d39472" },
};

const DISPLAY_FONTS = ["Instrument Serif", "Cormorant Garamond", "DM Serif Display", "Playfair Display"];
const BODY_FONTS = ["Manrope", "Inter", "Geist", "DM Sans"];

function App() {
  const [tab, setTab] = React.useState("overview");
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  const baseData = window.WEDDING_DATA;
  const [override, setOverride] = React.useState(() => loadOverrides());
  const data = React.useMemo(() => mergeData(baseData, override), [baseData, override]);

  const handleApply = (parsed) => {
    saveOverrides(parsed);
    setOverride(loadOverrides());
  };
  const handleReset = () => {
    clearOverrides();
    setOverride(null);
  };

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--font-display", `"${t.displayFont}", Georgia, serif`);
    root.style.setProperty("--font-body", `"${t.bodyFont}", -apple-system, sans-serif`);
    const preset = ACCENT_PRESETS[t.accentColor] || ACCENT_PRESETS.wine;
    root.style.setProperty("--wine", preset.primary);
    root.style.setProperty("--wine-deep", preset.deep);
    root.style.setProperty("--wine-soft", preset.soft);
  }, [t.displayFont, t.bodyFont, t.accentColor]);

  return (
    <>
      <header className="topbar">
        <div className="topbar-inner">
          <div className="brand">
            <span className="heart">❤</span>
            <span>Hochzeitsplaner</span>
            {override && (
              <span style={{
                marginLeft: 12,
                fontSize: 9,
                fontFamily: "var(--font-mono)",
                letterSpacing: "0.16em",
                color: "var(--gold-deep)",
                background: "var(--gold-soft)",
                padding: "3px 8px",
                borderRadius: 2,
                textTransform: "uppercase",
              }}>
                PDF-Import
              </span>
            )}
          </div>
          <Countdown targetISO={data.meta.weddingDate} />
        </div>
        <div className="tabs">
          {TABS.map((x) => (
            <button
              key={x.key}
              className={`tab ${tab === x.key ? "active" : ""}`}
              onClick={() => setTab(x.key)}
            >
              {x.label}
            </button>
          ))}
        </div>
      </header>

      <main className="page">
        {tab === "overview"  && <OverviewView  data={data} />}
        {tab === "wedding"   && <WeddingView   data={data} />}
        {tab === "honeymoon" && <HoneymoonView data={data} />}
        {tab === "savings"   && <SavingsView   data={data} />}
        {tab === "deco"      && <DecoView      data={data} />}
        {tab === "import"    && <ImportView    baseData={baseData} currentData={data} override={override} onApply={handleApply} onReset={handleReset} />}
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Typografie">
          <TweakSelect
            label="Display-Font"
            value={t.displayFont}
            options={DISPLAY_FONTS}
            onChange={(v) => setT("displayFont", v)}
          />
          <TweakSelect
            label="Body-Font"
            value={t.bodyFont}
            options={BODY_FONTS}
            onChange={(v) => setT("bodyFont", v)}
          />
        </TweakSection>
        <TweakSection label="Farbe">
          <TweakColor
            label="Akzent"
            value={t.accentColor}
            options={[
              { value: "wine",     color: "#7a2929" },
              { value: "forest",   color: "#2f5d3f" },
              { value: "twilight", color: "#3b3a6b" },
              { value: "copper",   color: "#a85a32" },
            ].map(o => o.color)}
            onChange={(v) => {
              // map back color -> key
              const map = { "#7a2929": "wine", "#2f5d3f": "forest", "#3b3a6b": "twilight", "#a85a32": "copper" };
              setT("accentColor", map[v] || "wine");
            }}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);