/* ============================================================
   HOCHZEITSPLANER — Views (Tabs)
   ============================================================ */

// =============================================================
//  OVERVIEW
// =============================================================
function OverviewView({ data }) {
  const w = data.wedding;
  const h = data.honeymoon;

  const wBudget = sum(w.categories, "budget");
  const wPaid   = sum(w.categories, "paid");
  const wLeft   = wBudget - wPaid;

  const hBudget = sum(h.categories, "budget");
  const hPaid   = sum(h.categories, "paid");
  const hLeft   = hBudget - hPaid;

  // Saved so far up to today
  const today = todayISO();
  const wSavedSoFar = data.weddingSavings
    .filter(r => r.date <= today)
    .reduce((a, r) => a + r.sheep + r.shepard, 0);
  const hSavedSoFar = data.honeymoonSavings
    .filter(r => r.date <= today)
    .reduce((a, r) => a + r.sheep + r.shepard, 0);

  const totalBudget = wBudget + hBudget;
  const totalPaid   = wPaid + hPaid;
  const totalSaved  = wSavedSoFar + hSavedSoFar;

  const daysToWedding = daysBetween(today, data.meta.weddingDate);

  // Top warnings
  const wOverflow = wBudget - w.totalSavingsTarget; // 595 over

  return (
    <div>
      {/* HERO */}
      <div className="hero">
        <div className="hero-eyebrow">Wir heiraten am</div>
        <h1 className="hero-title">
          <em>22.</em> August <em>2026</em>
        </h1>
        <div className="hero-date">
          <span>Hamburg</span><span className="dot" /><span>{daysToWedding > 0 ? `noch ${daysToWedding} Tage` : "heute"}</span><span className="dot" /><span>Sheep & Shepard</span>
        </div>
      </div>

      {/* TOP STATS */}
      <div className="stat-grid">
        <div className="stat">
          <div className="stat-label">Gesamtbudget</div>
          <div className="stat-value">{fmtEUR(totalBudget)}</div>
          <div className="stat-meta">Hochzeit + Flitterwochen</div>
        </div>
        <div className="stat">
          <div className="stat-label">Bereits bezahlt</div>
          <div className="stat-value wine">{fmtEUR(totalPaid)}</div>
          <div className="stat-meta">{Math.round(totalPaid / totalBudget * 100)}% des Gesamtbudgets</div>
          <div className="stat-progress"><i style={{ width: `${(totalPaid / totalBudget) * 100}%` }} /></div>
        </div>
        <div className="stat">
          <div className="stat-label">Gespart bis heute</div>
          <div className="stat-value sage">{fmtEUR(totalSaved)}</div>
          <div className="stat-meta">Hochzeits- + Honeymoon-Topf</div>
        </div>
        <div className="stat">
          <div className="stat-label">Noch offen</div>
          <div className="stat-value gold">{fmtEUR(totalBudget - totalPaid)}</div>
          <div className="stat-meta">bis alles bezahlt ist</div>
        </div>
      </div>

      {wOverflow > 0 && (
        <div className="alert">
          <strong>Hinweis:</strong> Das Hochzeitsbudget liegt aktuell <strong>{fmtEUR(wOverflow)}</strong> über dem geplanten Sparziel von {fmtEUR(w.totalSavingsTarget)} bis 31.12.2026. Entweder Sparplan anpassen oder eine Kategorie kürzen.
        </div>
      )}

      {/* CARDS */}
      <div className="cards-grid">
        <div className="summary-card">
          <h3 className="ttl">Die Hochzeit</h3>
          <div className="sub">22.08.2026 · Hamburg</div>
          <div className="big">{fmtEUR(wPaid)}<small> / {fmtEUR(wBudget)}</small></div>
          <div className="barline"><i style={{ width: `${(wPaid / wBudget) * 100}%` }} /></div>
          <div className="legend">
            <span>{Math.round((wPaid / wBudget) * 100)}% bezahlt</span>
            <span>{fmtEUR(wLeft)} offen</span>
          </div>
        </div>
        <div className="summary-card">
          <h3 className="ttl">Die Flitterwochen</h3>
          <div className="sub">27.08. – 24.09.2026 · 🇦🇺 + 🇳🇿</div>
          <div className="big">{fmtEUR(hPaid)}<small> / {fmtEUR(hBudget)}</small></div>
          <div className="barline"><i style={{ width: `${(hPaid / hBudget) * 100}%`, background: "linear-gradient(90deg, var(--gold), var(--sage))" }} /></div>
          <div className="legend">
            <span>{Math.round((hPaid / hBudget) * 100)}% bezahlt</span>
            <span>{fmtEUR(hLeft)} offen</span>
          </div>
        </div>
      </div>

      {/* TOP CATEGORIES */}
      <SectionHead
        eyebrow="Top 5 Posten"
        title="<em>Wo</em> das Geld hinfließt"
        sub="Hochzeit + Flitterwochen kombiniert"
      />
      <div className="cat-list" style={{ marginBottom: 64 }}>
        {[...w.categories, ...h.categories.map(c => ({ ...c, name: c.name + " (HM)" }))]
          .sort((a, b) => b.budget - a.budget)
          .slice(0, 8)
          .map((c) => (
            <BudgetBar key={c.name} name={c.name} budget={c.budget} paid={c.paid} />
          ))}
      </div>

      <div className="footer-note">
        Daten: <code>data.js</code> · Stand: {fmtDate(today)} · Mit <span className="heart">❤</span> gepflegt
      </div>
    </div>
  );
}

function CountdownTile({ value, label, small }) {
  return (
    <div>
      <div className="num" style={small ? { fontSize: 32 } : undefined}>{value.toLocaleString("de-DE")}</div>
      <div className="lbl">{label}</div>
    </div>
  );
}

// =============================================================
//  WEDDING VIEW
// =============================================================
function WeddingView({ data }) {
  const w = data.wedding;
  const totalBudget = sum(w.categories, "budget");
  const totalPaid   = sum(w.categories, "paid");
  const totalLeft   = totalBudget - totalPaid;
  const overflow    = totalBudget - w.totalSavingsTarget;

  const donutData = w.categories
    .sort((a, b) => b.budget - a.budget)
    .map((c, i) => ({
      label: c.name,
      value: c.budget,
      color: DONUT_COLORS[i % DONUT_COLORS.length],
    }));

  return (
    <div>
      <SectionHead
        eyebrow="Hochzeit · 22.08.2026"
        title="<em>Hochzeits</em>budget"
        sub={`${w.categories.length} Kategorien · Ziel: ${fmtEUR(w.totalSavingsTarget)}`}
      />

      <div className="stat-grid" style={{ marginBottom: 56 }}>
        <div className="stat">
          <div className="stat-label">Gesamtbudget</div>
          <div className="stat-value">{fmtEUR(totalBudget)}</div>
        </div>
        <div className="stat">
          <div className="stat-label">Bezahlt</div>
          <div className="stat-value wine">{fmtEUR(totalPaid)}</div>
          <div className="stat-progress"><i style={{ width: `${(totalPaid / totalBudget) * 100}%` }} /></div>
        </div>
        <div className="stat">
          <div className="stat-label">Noch offen</div>
          <div className="stat-value gold">{fmtEUR(totalLeft)}</div>
        </div>
        <div className="stat">
          <div className="stat-label">{overflow > 0 ? "Über Sparziel" : "Puffer"}</div>
          <div className={`stat-value ${overflow > 0 ? "terra" : "sage"}`}>{overflow > 0 ? "+" : ""}{fmtEUR(Math.abs(overflow))}</div>
          <div className="stat-meta">Sparziel: {fmtEUR(w.totalSavingsTarget)}</div>
        </div>
      </div>

      <div className="two-col">
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Kategorien · Budget vs. bezahlt</div>
          <div className="cat-list">
            {w.categories
              .slice()
              .sort((a, b) => b.budget - a.budget)
              .map((c) => (
                <BudgetBar key={c.name} name={c.name} budget={c.budget} paid={c.paid} />
              ))}
          </div>
          <div className="totals">
            <div className="lbl">Gesamt</div>
            <div />
            <div>
              <span className="nm">{fmtEUR(totalPaid)}</span>
              <span className="sep" style={{ color: "var(--ink-mute)", padding: "0 8px" }}>/</span>
              <span className="nm">{fmtEUR(totalBudget)}</span>
            </div>
          </div>
          {overflow > 0 && (
            <div className="totals" style={{ borderTop: "1px solid var(--rule-soft)", marginTop: 8, paddingTop: 12 }}>
              <div style={{ fontSize: 12, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.16em" }}>vs. Sparziel</div>
              <div />
              <div className="delta-warn nm">−{fmtEUR(overflow)}</div>
            </div>
          )}
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Verteilung</div>
          <Donut
            data={donutData}
            center={
              <div>
                <div className="big">{fmtEUR(totalBudget)}</div>
                <div className="sub">Gesamtbudget</div>
              </div>
            }
          />
        </div>
      </div>
    </div>
  );
}

// =============================================================
//  HONEYMOON VIEW
// =============================================================
function HoneymoonView({ data }) {
  const h = data.honeymoon;
  const totalBudget = sum(h.categories, "budget");
  const totalPaid   = sum(h.categories, "paid");
  const days = daysBetween(data.meta.honeymoonStart, data.meta.honeymoonEnd) + 1;

  const drivingKm = data.itinerary.reduce((a, x) => a + (x.km || 0), 0);
  const flights = data.itinerary.filter(x => x.travel === "Flug").length;

  const donutData = h.categories
    .sort((a, b) => b.budget - a.budget)
    .map((c, i) => ({
      label: c.name,
      value: c.budget,
      color: DONUT_COLORS[i % DONUT_COLORS.length],
    }));

  return (
    <div>
      <SectionHead
        eyebrow="Flitterwochen · 27.08. – 24.09.2026"
        title="<em>Australien</em> & Neuseeland"
        sub="29 Tage · 2 Länder · 1 Reise des Lebens"
      />

      {/* trip overview tiles */}
      <div className="trip-overview">
        <div className="trip-stat">
          <div className="v">{days}</div>
          <div className="l">Tage unterwegs</div>
        </div>
        <div className="trip-stat">
          <div className="v">{flights}</div>
          <div className="l">Flüge</div>
        </div>
        <div className="trip-stat">
          <div className="v">{drivingKm.toLocaleString("de-DE")}<small style={{ fontSize: 16, color: "var(--ink-mute)" }}> km</small></div>
          <div className="l">am Steuer</div>
        </div>
        <div className="trip-stat">
          <div className="v">{fmtEUR(totalBudget)}</div>
          <div className="l">Gesamtbudget</div>
        </div>
      </div>

      <div className="two-col">
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Budget · Kategorien</div>
          <div className="cat-list">
            {h.categories
              .slice()
              .sort((a, b) => b.budget - a.budget)
              .map((c) => (
                <BudgetBar key={c.name} name={c.name} budget={c.budget} paid={c.paid} color="var(--gold)" />
              ))}
          </div>
          <div className="totals">
            <div className="lbl">Gesamt</div>
            <div />
            <div>
              <span className="nm">{fmtEUR(totalPaid)}</span>
              <span className="sep" style={{ color: "var(--ink-mute)", padding: "0 8px" }}>/</span>
              <span className="nm">{fmtEUR(totalBudget)}</span>
            </div>
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Verteilung</div>
          <Donut
            data={donutData}
            center={
              <div>
                <div className="big">{fmtEUR(totalBudget)}</div>
                <div className="sub">Honeymoon</div>
              </div>
            }
          />
        </div>
      </div>

      {/* ROUTE MAP */}
      <SectionHead
        eyebrow="Die Strecke"
        title="<em>Route</em> auf einer Karte"
        sub="Drive · Flug · Fähre"
      />
      <TripMap />

      {/* ITINERARY */}
      <SectionHead
        eyebrow="Tag für Tag"
        title="<em>Reise</em>plan"
        sub={`${data.itinerary.length} Etappen`}
      />
      <ItineraryList items={data.itinerary} />
    </div>
  );
}

function ItineraryList({ items }) {
  const [filter, setFilter] = React.useState("alle");
  const filters = ["alle", "Australien", "Neuseeland"];
  const filtered = items.filter(i =>
    filter === "alle" ||
    (filter === "Australien" && i.region === "Australien") ||
    (filter === "Neuseeland" && i.region === "Neuseeland")
  );

  return (
    <div>
      <div className="itin-filters" style={{ display: "flex", gap: 8, marginBottom: 24, flexWrap: "wrap" }}>
        {filters.map(f => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            style={{
              fontFamily: "var(--font-body)",
              fontSize: 11,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              padding: "8px 14px",
              border: "1px solid " + (filter === f ? "var(--ink)" : "var(--rule)"),
              background: filter === f ? "var(--ink)" : "transparent",
              color: filter === f ? "var(--paper)" : "var(--ink-soft)",
              cursor: "pointer",
            }}
          >
            {f}
          </button>
        ))}
      </div>
      <div className="itin-list">
        {filtered.map((it) => {
          const tagClass = it.region === "Australien" ? "aus" : it.region === "Neuseeland" ? "nz" : "transit";
          return (
            <div className="itin-row" key={it.date}>
              <div className="itin-cell-day">
                <div className="day">{String(it.day).padStart(2, "0")}</div>
                <div className="day-sub">{it.travel}</div>
              </div>
              <div className="date itin-cell-date">
                {fmtDateShort(it.date)}
                <div style={{ marginTop: 8 }}>
                  <span className={`region-tag ${tagClass}`}>{it.region}</span>
                </div>
              </div>
              <div className="itin-cell-route">
                <div className="route">{it.route}</div>
                <div className="activities">{it.activities}</div>
              </div>
              <div className="activities itin-cell-weather" style={{ fontStyle: "italic", color: "var(--ink-mute)" }}>
                {it.weather || ""}
              </div>
              <div className="meta itin-cell-meta">
                <div className="stay">{it.stay}</div>
                {it.km && <div>{it.km} km</div>}
                {it.hours && <div>{it.hours}</div>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// expose
Object.assign(window, { OverviewView, WeddingView, HoneymoonView });