/* spočítAIto.cz — Scénáře page */

const { useState: useStateScenarios, useMemo: useMemoScenarios } = React;

const SCENARIO_PRESETS = [
  { id: 'rentUp', label: 'Zvýšit nájem o 10 %', icon: 'M3 12l4-4 3 3 7-7M14 4h4v4', desc: 'Růst trhu, nová smlouva' },
  { id: 'rateUp', label: 'Růst úroku +2 %', icon: 'M3 17l5-5 4 4 8-8M14 8h4v4', desc: 'Refinancování za drahší úrok', tone: 'warn' },
  { id: 'vacancy', label: 'Měsíc neobsazeno', icon: 'M5 8a4 4 0 114 4M5 14h10', desc: 'Výpadek 1× ročně', tone: 'warn' },
  { id: 'newProp', label: 'Přidat 5. byt', icon: 'M3 10h14M10 3v14', desc: 'Rozšíření portfolia' },
  { id: 'sell', label: 'Prodat nejhorší', icon: 'M5 5l10 10M15 5L5 15', desc: 'Vyřadit ztrátový', tone: 'warn' },
  { id: 'all', label: 'Vše dohromady', icon: 'M3 10l4 4 10-10', desc: 'Kombinace nejlepších' },
];

function ScenariosPage({ properties }) {
  const [activeIds, setActiveIds] = useStateScenarios(['rentUp']);

  const toggle = (id) => {
    if (id === 'all') {
      setActiveIds(activeIds.includes('all') ? [] : ['rentUp', 'newProp']);
      return;
    }
    setActiveIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  const baseline = useMemoScenarios(() => computeYear(properties), [properties]);
  const projected = useMemoScenarios(() => {
    let props = properties.map(p => ({ ...p, costs: { ...p.costs } }));
    let extraCostsYear = 0;
    let vacancyMonths = 0;

    if (activeIds.includes('rentUp')) {
      props = props.map(p => ({ ...p, rent: Math.round(p.rent * 1.10) }));
    }
    if (activeIds.includes('rateUp')) {
      // ~+2% rate adds ~12% to mortgage payments (rough)
      props = props.map(p => ({ ...p, costs: { ...p.costs, mortgage: Math.round(p.costs.mortgage * 1.12) } }));
    }
    if (activeIds.includes('vacancy')) {
      vacancyMonths = 1;
    }
    if (activeIds.includes('newProp')) {
      props = [...props, {
        id: 999, name: 'Byt 2+kk Holešovice (plán)',
        rent: 24000,
        costs: { mortgage: 14500, fund: 2500, insurance: 320, propertyTax: 220, management: 1700, reserve: 1100, other: 0 },
      }];
    }
    if (activeIds.includes('sell')) {
      // Remove the property with worst monthly net
      const worst = [...props].sort((a, b) => (a.rent - sumCosts(a.costs)) - (b.rent - sumCosts(b.costs)))[0];
      if (worst) props = props.filter(p => p.id !== worst.id);
    }

    const calc = computeYear(props);
    if (vacancyMonths > 0) {
      const monthlyGross = calc.gross / 12;
      calc.gross -= monthlyGross * vacancyMonths;
      calc.net = calc.gross - calc.costs;
    }
    return { ...calc, props };
  }, [properties, activeIds]);

  const delta = projected.net - baseline.net;
  const deltaPct = baseline.net !== 0 ? (delta / Math.abs(baseline.net)) * 100 : 0;

  return (
    <div className="page">
      <div className="page-toolbar">
        <div className="toolbar-left">
          <h1 className="page-title">Scénáře</h1>
          <span className="page-sub">Co když se změní podmínky? Porovnejte aktuální stav s plánem.</span>
        </div>
      </div>

      <div className="scenario-grid">
        <div className="card scenario-baseline">
          <div className="scenario-head">
            <span className="caption">Aktuální stav</span>
            <span className="pill">Baseline</span>
          </div>
          <div className="scenario-num num">{fmtCZK(baseline.net)}</div>
          <div className="scenario-sub">ročně · {fmtCZK(baseline.net / 12)} / měs.</div>
          <div className="scenario-meta">
            <div><span className="caption">Hrubý</span><span className="num">{fmtCZK(baseline.gross)}</span></div>
            <div><span className="caption">Náklady</span><span className="num">{fmtCZK(baseline.costs)}</span></div>
            <div><span className="caption">Marže</span><span className="num">{fmtPct(((baseline.net / Math.max(1, baseline.gross)) * 100).toFixed(1))}</span></div>
          </div>
        </div>

        <div className={`card scenario-projected ${delta >= 0 ? 'pos' : 'neg'}`}>
          <div className="scenario-head">
            <span className="caption">Po scénářích</span>
            <span className="pill pill-active">{activeIds.length || 0} aktivních</span>
          </div>
          <div className={`scenario-num num ${delta >= 0 ? 'pos' : 'neg'}`}>{fmtCZK(projected.net)}</div>
          <div className="scenario-sub">ročně · {fmtCZK(projected.net / 12)} / měs.</div>
          <div className="scenario-delta">
            <span className={`delta-pill ${delta >= 0 ? 'pos' : 'neg'}`}>
              {delta >= 0 ? '↑' : '↓'} {delta >= 0 ? '+' : ''}{fmtCZK(delta)}
            </span>
            <span className={`delta-pct ${delta >= 0 ? 'pos' : 'neg'}`}>
              {delta >= 0 ? '+' : ''}{deltaPct.toFixed(1).replace('.', ',')} %
            </span>
            <span className="delta-label">vs. baseline (ročně)</span>
          </div>
        </div>
      </div>

      <h2 className="section-title">Co všechno měnit?</h2>
      <div className="preset-grid">
        {SCENARIO_PRESETS.filter(s => s.id !== 'all').map(s => {
          const active = activeIds.includes(s.id);
          return (
            <button
              key={s.id}
              className={`preset-card ${active ? 'active' : ''} ${s.tone === 'warn' ? 'warn' : ''}`}
              onClick={() => toggle(s.id)}
              type="button"
            >
              <span className={`preset-icon ${active ? 'active' : ''}`}>
                <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d={s.icon} />
                </svg>
              </span>
              <span className="preset-body">
                <span className="preset-label">{s.label}</span>
                <span className="preset-desc">{s.desc}</span>
              </span>
              <span className={`preset-check ${active ? 'on' : ''}`} aria-hidden="true">
                {active && (
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 6l3 3 5-6"/></svg>
                )}
              </span>
            </button>
          );
        })}
      </div>

      <div className="card breakdown-card">
        <h2 className="card-title">Rozdíl po nemovitostech</h2>
        <div className="breakdown-list">
          {properties.map(p => {
            const baseNet = (p.rent - sumCosts(p.costs)) * 12;
            const proj = projected.props.find(x => x.id === p.id);
            const projNet = proj ? (proj.rent - sumCosts(proj.costs)) * 12 : 0;
            const removed = !proj;
            const d = removed ? -baseNet : projNet - baseNet;
            const max = Math.max(Math.abs(baseNet), Math.abs(projNet), 1);
            return (
              <div className="bd-row" key={p.id}>
                <span className="bd-name">{p.name}{removed && <span className="bd-tag">prodán</span>}</span>
                <div className="bd-bar-wrap">
                  <BarPair base={baseNet} projected={removed ? 0 : projNet} max={max} />
                </div>
                <span className={`bd-delta num ${d >= 0 ? 'pos' : 'neg'}`}>{d >= 0 ? '+' : ''}{fmtCZK(d)}</span>
              </div>
            );
          })}
          {projected.props.filter(p => !properties.find(x => x.id === p.id)).map(p => {
            const projNet = (p.rent - sumCosts(p.costs)) * 12;
            return (
              <div className="bd-row added" key={p.id}>
                <span className="bd-name">{p.name}<span className="bd-tag pos">přidáno</span></span>
                <div className="bd-bar-wrap">
                  <BarPair base={0} projected={projNet} max={Math.abs(projNet)} />
                </div>
                <span className={`bd-delta num ${projNet >= 0 ? 'pos' : 'neg'}`}>{projNet >= 0 ? '+' : ''}{fmtCZK(projNet)}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function BarPair({ base, projected, max }) {
  const bw = (Math.abs(base) / max) * 100;
  const pw = (Math.abs(projected) / max) * 100;
  return (
    <div className="bp">
      <div className="bp-row">
        <span className="bp-tag">teď</span>
        <div className="bp-track">
          <div className={`bp-fill ${base >= 0 ? 'pos' : 'neg'}`} style={{ width: `${bw}%` }} />
        </div>
        <span className="bp-num num">{base >= 0 ? '+' : ''}{fmtCZK(base)}</span>
      </div>
      <div className="bp-row">
        <span className="bp-tag bp-tag-proj">plán</span>
        <div className="bp-track">
          <div className={`bp-fill ${projected >= 0 ? 'pos' : 'neg'} bp-proj`} style={{ width: `${pw}%` }} />
        </div>
        <span className="bp-num num">{projected >= 0 ? '+' : ''}{fmtCZK(projected)}</span>
      </div>
    </div>
  );
}

function computeYear(props) {
  const grossM = props.reduce((a, p) => a + p.rent, 0);
  const costsM = props.reduce((a, p) => a + sumCosts(p.costs), 0);
  return { gross: grossM * 12, costs: costsM * 12, net: (grossM - costsM) * 12 };
}

window.ScenariosPage = ScenariosPage;