/* ============================================================
   HOCHZEITSPLANER — Sparplan + Deko Views
   ============================================================ */

// =============================================================
//  SAVINGS VIEW — line chart of cumulative savings
// =============================================================
function SavingsView({ data }) {
  const [plan, setPlan] = React.useState("wedding"); // 'wedding' | 'honeymoon' | 'both'

  const series = React.useMemo(() => {
    const buildSeries = (rows) => {
      let total = 0;
      return rows.map(r => {
        total += r.sheep + r.shepard;
        return { date: r.date, sheep: r.sheep, shepard: r.shepard, total };
      });
    };
    return {
      wedding: buildSeries(data.weddingSavings),
      honeymoon: buildSeries(data.honeymoonSavings),
    };
  }, [data]);

  const activeSeries = plan === "wedding" ? series.wedding
    : plan === "honeymoon" ? series.honeymoon
    : null;

  const target = plan === "wedding" ? data.wedding.totalSavingsTarget
    : plan === "honeymoon" ? data.honeymoon.totalSavingsTarget
    : data.wedding.totalSavingsTarget + data.honeymoon.totalSavingsTarget;

  // Combined series for 'both'
  const combinedSeries = React.useMemo(() => {
    const allDates = new Set([
      ...data.weddingSavings.map(r => r.date),
      ...data.honeymoonSavings.map(r => r.date),
    ]);
    const sorted = [...allDates].sort();
    const wMap = new Map(series.wedding.map(s => [s.date, s.total]));
    const hMap = new Map(series.honeymoon.map(s => [s.date, s.total]));
    let lastW = 0, lastH = 0;
    return sorted.map(d => {
      if (wMap.has(d)) lastW = wMap.get(d);
      if (hMap.has(d)) lastH = hMap.get(d);
      return { date: d, wedding: lastW, honeymoon: lastH, total: lastW + lastH };
    });
  }, [series, data]);

  const today = todayISO();
  const wSavedNow = series.wedding.filter(r => r.date <= today).slice(-1)[0]?.total || 0;
  const hSavedNow = series.honeymoon.filter(r => r.date <= today).slice(-1)[0]?.total || 0;
  const wTotal = series.wedding.slice(-1)[0]?.total || 0;
  const hTotal = series.honeymoon.slice(-1)[0]?.total || 0;

  return (
    <div>
      <SectionHead
        eyebrow="Spartopf"
        title="<em>Spar</em>plan"
        sub="Monatliche Beträge & kumulierter Stand"
      />

      <div className="stat-grid" style={{ marginBottom: 32 }}>
        <div className="stat">
          <div className="stat-label">Hochzeit gespart</div>
          <div className="stat-value wine">{fmtEUR(wSavedNow)}</div>
          <div className="stat-meta">von {fmtEUR(wTotal)} geplant</div>
          <div className="stat-progress"><i style={{ width: `${(wSavedNow / wTotal) * 100}%` }} /></div>
        </div>
        <div className="stat">
          <div className="stat-label">Honeymoon gespart</div>
          <div className="stat-value gold">{fmtEUR(hSavedNow)}</div>
          <div className="stat-meta">von {fmtEUR(hTotal)} geplant</div>
          <div className="stat-progress"><i style={{ width: `${(hSavedNow / hTotal) * 100}%`, background: "var(--gold)" }} /></div>
        </div>
        <div className="stat">
          <div className="stat-label">Insgesamt heute</div>
          <div className="stat-value sage">{fmtEUR(wSavedNow + hSavedNow)}</div>
          <div className="stat-meta">beide Töpfe zusammen</div>
        </div>
        <div className="stat">
          <div className="stat-label">Endziel 31.12.26</div>
          <div className="stat-value">{fmtEUR(wTotal + hTotal)}</div>
          <div className="stat-meta">geplanter Gesamtstand</div>
        </div>
      </div>

      <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
        {[
          { key: "wedding", label: "Hochzeits-Sparplan" },
          { key: "honeymoon", label: "Honeymoon-Sparplan" },
          { key: "both", label: "Beide kombiniert" },
        ].map(b => (
          <button
            key={b.key}
            onClick={() => setPlan(b.key)}
            style={{
              fontFamily: "var(--font-body)",
              fontSize: 11,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              padding: "10px 16px",
              border: "1px solid " + (plan === b.key ? "var(--ink)" : "var(--rule)"),
              background: plan === b.key ? "var(--ink)" : "transparent",
              color: plan === b.key ? "var(--paper)" : "var(--ink-soft)",
              cursor: "pointer",
            }}
          >
            {b.label}
          </button>
        ))}
      </div>

      <div className="savings-chart">
        <SavingsChart
          mode={plan}
          weddingSeries={series.wedding}
          honeymoonSeries={series.honeymoon}
          combinedSeries={combinedSeries}
          target={target}
        />
      </div>

      <SectionHead
        eyebrow="Monatlich"
        title="<em>Sparrate</em>n pro Monat"
        sub="Sheep & Shepard"
      />
      <MonthlyTable
        rows={plan === "honeymoon" ? data.honeymoonSavings : data.weddingSavings}
        label={plan === "honeymoon" ? "Honeymoon" : "Hochzeit"}
      />
    </div>
  );
}

// SVG line chart for savings
function SavingsChart({ mode, weddingSeries, honeymoonSeries, combinedSeries, target }) {
  const W = 1200, H = 360, padL = 60, padR = 30, padT = 20, padB = 40;
  const innerW = W - padL - padR;
  const innerH = H - padT - padB;

  const series = mode === "wedding" ? weddingSeries
    : mode === "honeymoon" ? honeymoonSeries
    : combinedSeries;

  const dates = series.map(s => new Date(s.date + "T12:00:00").getTime());
  const minDate = Math.min(...dates);
  const maxDate = Math.max(...dates);
  const maxValue = Math.max(target, ...series.map(s => (mode === "both" ? s.total : s.total))) * 1.05;

  const xScale = (d) => padL + ((new Date(d + "T12:00:00").getTime() - minDate) / (maxDate - minDate)) * innerW;
  const yScale = (v) => padT + innerH - (v / maxValue) * innerH;

  const today = todayISO();
  const todayX = xScale(today);

  // Y axis ticks
  const yTicks = [];
  const tickStep = Math.ceil(maxValue / 5 / 5000) * 5000;
  for (let v = 0; v <= maxValue; v += tickStep) yTicks.push(v);

  // X axis (year markers)
  const years = [...new Set(series.map(s => s.date.slice(0, 4)))];

  const buildPath = (vals) => {
    return series.map((s, i) => {
      const x = xScale(s.date);
      const y = yScale(vals[i]);
      return `${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`;
    }).join(" ");
  };

  return (
    <svg className="savings-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      {/* horizontal gridlines + Y labels */}
      {yTicks.map((v, i) => {
        const y = yScale(v);
        return (
          <g key={i}>
            <line x1={padL} x2={W - padR} y1={y} y2={y} stroke="#e0d3bc" strokeWidth="0.5" />
            <text x={padL - 10} y={y + 4} textAnchor="end" fontSize="10" fill="#8a7c6d" fontFamily="var(--font-mono)">
              {(v / 1000).toFixed(0)}k €
            </text>
          </g>
        );
      })}

      {/* target line */}
      <line
        x1={padL} x2={W - padR}
        y1={yScale(target)} y2={yScale(target)}
        stroke="#7a2929"
        strokeWidth="1"
        strokeDasharray="4 4"
      />
      <text x={W - padR - 4} y={yScale(target) - 6} textAnchor="end" fontSize="10" fill="#7a2929" fontFamily="var(--font-mono)">
        Ziel · {fmtEUR(target)}
      </text>

      {/* today line */}
      {todayX >= padL && todayX <= W - padR && (
        <g>
          <line
            x1={todayX} x2={todayX}
            y1={padT} y2={H - padB}
            stroke="#b8924d"
            strokeWidth="1"
          />
          <text x={todayX + 6} y={padT + 12} fontSize="10" fill="#8c6b30" fontFamily="var(--font-mono)">heute</text>
        </g>
      )}

      {/* X axis year labels */}
      {years.map(y => {
        const yDate = `${y}-06-01`;
        const x = xScale(yDate);
        if (x < padL || x > W - padR) return null;
        return (
          <text key={y} x={x} y={H - padB + 22} textAnchor="middle" fontSize="11" fill="#5a4d40" fontFamily="var(--font-mono)" letterSpacing="2">
            {y}
          </text>
        );
      })}

      {/* lines */}
      {mode === "both" ? (
        <>
          <path d={buildPath(combinedSeries.map(s => s.wedding))} fill="none" stroke="#7a2929" strokeWidth="2" />
          <path d={buildPath(combinedSeries.map(s => s.honeymoon))} fill="none" stroke="#b8924d" strokeWidth="2" />
          <path d={buildPath(combinedSeries.map(s => s.total))} fill="none" stroke="#5f7a64" strokeWidth="2.5" />
        </>
      ) : (
        <>
          <path
            d={`${buildPath(series.map(s => s.total))} L ${xScale(series[series.length-1].date)} ${yScale(0)} L ${xScale(series[0].date)} ${yScale(0)} Z`}
            fill={mode === "wedding" ? "rgba(122,41,41,0.08)" : "rgba(184,146,77,0.12)"}
          />
          <path
            d={buildPath(series.map(s => s.total))}
            fill="none"
            stroke={mode === "wedding" ? "#7a2929" : "#b8924d"}
            strokeWidth="2.5"
          />
          {series.map((s, i) => (
            <circle
              key={i}
              cx={xScale(s.date)}
              cy={yScale(s.total)}
              r={s.date <= today ? 3 : 2}
              fill={s.date <= today ? (mode === "wedding" ? "#7a2929" : "#b8924d") : "#fbf6ec"}
              stroke={mode === "wedding" ? "#7a2929" : "#b8924d"}
              strokeWidth="1"
            />
          ))}
        </>
      )}

      {/* legend for both */}
      {mode === "both" && (
        <g transform={`translate(${padL + 12}, ${padT + 12})`}>
          <rect x="0" y="0" width="160" height="62" fill="#fbf6ec" stroke="#e0d3bc" />
          <g transform="translate(10, 16)">
            <line x1="0" y1="0" x2="20" y2="0" stroke="#7a2929" strokeWidth="2" />
            <text x="28" y="3" fontSize="10" fill="#1c1612">Hochzeit</text>
          </g>
          <g transform="translate(10, 32)">
            <line x1="0" y1="0" x2="20" y2="0" stroke="#b8924d" strokeWidth="2" />
            <text x="28" y="3" fontSize="10" fill="#1c1612">Honeymoon</text>
          </g>
          <g transform="translate(10, 48)">
            <line x1="0" y1="0" x2="20" y2="0" stroke="#5f7a64" strokeWidth="2" />
            <text x="28" y="3" fontSize="10" fill="#1c1612">Gesamt</text>
          </g>
        </g>
      )}
    </svg>
  );
}

function MonthlyTable({ rows, label }) {
  let cum = 0;
  return (
    <div style={{ border: "1px solid var(--rule)", background: "var(--paper)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "120px 1fr 1fr 1fr 1fr", padding: "12px 24px", borderBottom: "1px solid var(--rule)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.18em", color: "var(--ink-mute)" }}>
        <div>Monat</div><div>Sheep</div><div>Shepard</div><div>Summe</div><div style={{ textAlign: "right" }}>Kumuliert · {label}</div>
      </div>
      {rows.map((r, i) => {
        cum += r.sheep + r.shepard;
        const today = todayISO();
        const isPast = r.date <= today;
        return (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "120px 1fr 1fr 1fr 1fr",
            padding: "10px 24px",
            borderBottom: "1px solid var(--rule-soft)",
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            color: isPast ? "var(--ink)" : "var(--ink-mute)",
            background: isPast ? "transparent" : "rgba(0,0,0,0.01)",
          }}>
            <div style={{ fontFamily: "var(--font-body)" }}>{fmtDate(r.date, { month: "short", year: "numeric" })}</div>
            <div>{fmtEUR(r.sheep)}</div>
            <div>{fmtEUR(r.shepard)}</div>
            <div>{fmtEUR(r.sheep + r.shepard)}</div>
            <div style={{ textAlign: "right", color: "var(--wine)" }}>{fmtEUR(cum)}</div>
          </div>
        );
      })}
    </div>
  );
}

// =============================================================
//  DECORATIONS VIEW
// =============================================================
function DecoView({ data }) {
  const [open, setOpen] = React.useState({ Welcome: true, Ceremony: true, Réception: true, Party: true });
  const toggle = (k) => setOpen(o => ({ ...o, [k]: !o[k] }));

  const allItems = Object.values(data.decorations).flat();
  const grandBudget = allItems.reduce((a, x) => a + x.budget, 0);
  const grandPaid   = allItems.reduce((a, x) => a + x.paid, 0);

  return (
    <div>
      <SectionHead
        eyebrow="Details"
        title="<em>Deko</em>liste"
        sub={`${allItems.length} Posten · Bestandteil des Deco-Budgets`}
      />

      <div className="stat-grid" style={{ marginBottom: 40 }}>
        <div className="stat">
          <div className="stat-label">Deko-Posten gesamt</div>
          <div className="stat-value">{allItems.length}</div>
        </div>
        <div className="stat">
          <div className="stat-label">Geplant</div>
          <div className="stat-value">{fmtEURcents(grandBudget)}</div>
        </div>
        <div className="stat">
          <div className="stat-label">Bezahlt</div>
          <div className="stat-value wine">{fmtEURcents(grandPaid)}</div>
          <div className="stat-progress"><i style={{ width: `${(grandPaid / grandBudget) * 100}%` }} /></div>
        </div>
        <div className="stat">
          <div className="stat-label">Noch zu kaufen</div>
          <div className="stat-value gold">{fmtEURcents(grandBudget - grandPaid)}</div>
        </div>
      </div>

      {Object.entries(data.decorations).map(([group, items]) => {
        const b = items.reduce((a, x) => a + x.budget, 0);
        const p = items.reduce((a, x) => a + x.paid, 0);
        return (
          <div key={group} className={`deco-group ${open[group] ? "open" : ""}`}>
            <div className="deco-group-head" onClick={() => toggle(group)}>
              <div className="name">
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-mute)", marginRight: 14, letterSpacing: "0.16em" }}>
                  {open[group] ? "—" : "+"}
                </span>
                {group}
                <span style={{ fontSize: 12, color: "var(--ink-mute)", marginLeft: 14, fontFamily: "var(--font-mono)" }}>
                  · {items.length}
                </span>
              </div>
              <div className="totals-mini">
                <strong>{fmtEURcents(p)}</strong> bezahlt von <strong>{fmtEURcents(b)}</strong>
              </div>
            </div>
            <div className="deco-rows">
              <div style={{ display: "grid", gridTemplateColumns: "1fr 110px 110px 18px", gap: 16, padding: "12px 0 8px", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.18em", color: "var(--ink-mute)", borderBottom: "1px solid var(--rule-soft)" }}>
                <div>Artikel</div>
                <div style={{ textAlign: "right" }}>Budget</div>
                <div style={{ textAlign: "right" }}>Bezahlt</div>
                <div />
              </div>
              {items.map((it, i) => {
                const done = it.paid > 0 && it.paid >= it.budget;
                return (
                  <div key={i} className={`deco-row ${done ? "done" : ""}`}>
                    <div className="item">{it.item}</div>
                    <div className="num">{it.budget > 0 ? fmtEURcents(it.budget) : "—"}</div>
                    <div className="num" style={{ color: done ? "var(--sage)" : "var(--ink-soft)" }}>
                      {it.paid > 0 ? fmtEURcents(it.paid) : "—"}
                    </div>
                    <div className="check">{done ? "✓" : ""}</div>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { SavingsView, DecoView });