// FFC Edit Report — division-driven weekly entry + derived manager-report financials.
const { useState: ffcUseStateEdit } = React;

function EditReportView({ report, reports, onSave, onPreview }) {
  const { Input, Textarea, Button, Card } = window.FloatsFuelCellsDesignSystem_f57587;
  const C = window.FFCCalendar;
  const [form, setForm] = ffcUseStateEdit({ ...C.normalizeReport(report) });
  const [dirty, setDirty] = ffcUseStateEdit(false);
  const [saving, setSaving] = ffcUseStateEdit(false);
  const [toast, setToast] = ffcUseStateEdit(null);

  const derived = C.deriveReportFinancials(form, reports || []);
  const money = (v) => Number(v) || 0;
  const usd = (v) => '$' + Math.round(Number(v) || 0).toLocaleString();
  const pct = (v) => (Number(v) > 0 ? '+' : '') + (Number(v) || 0).toFixed(2) + '%';
  const set = (patch) => { setForm((f) => ({ ...f, ...patch })); setDirty(true); };
  const updateMonthlyForecast = (key, value) => {
    const next = { ...(form.monthly_forecasts || {}) };
    next[key] = money(value);
    set({ monthly_forecasts: C.normalizeMonthlyForecasts(next) });
  };

  const changeWeek = (week) => {
    const meta = C.periodMeta(C.periodEndingForWeek(week));
    const prior = (reports || []).find((r) => String(r.period_ending) === String(meta.period_ending));
    if (prior) { setForm({ ...C.normalizeReport(prior) }); setDirty(false); return; }
    const latest = [...(reports || [])].sort((a, b) => new Date(b.period_ending) - new Date(a.period_ending))[0];
    const carriedRows = latest?.division_rows ? latest.division_rows.map((r) => ({ name: r.name || 'Division', actual: 0, fc: 0, hidden: Boolean(r.hidden) })) : C.blankReport().division_rows;
    setForm({ ...C.blankReport({ period_ending: meta.period_ending, monthly_forecasts: form.monthly_forecasts, division_rows: carriedRows }), ...meta });
    setDirty(false);
  };

  const addDivision = () => set({ division_rows: [...(form.division_rows || []), { name: 'New Division', actual: 0, fc: 0, hidden: false }] });
  const updateDivision = (idx, patch) => {
    const rows = [...(form.division_rows || [])];
    rows[idx] = { ...rows[idx], ...patch };
    set({ division_rows: rows });
  };
  const hideDivision = (idx) => updateDivision(idx, { hidden: true });
  const unhideDivision = (idx) => updateDivision(idx, { hidden: false });
  const copyDivisionsOnly = () => {
    const latest = [...(reports || [])].sort((a, b) => new Date(b.period_ending) - new Date(a.period_ending))[0];
    if (latest?.division_rows) set({ division_rows: latest.division_rows.map((r) => ({ name: r.name || 'Division', actual: 0, fc: 0, hidden: Boolean(r.hidden) })) });
  };

  const save = async () => {
    setSaving(true); setToast(null);
    try {
      const normalized = C.deriveReportFinancials(form, reports || []);
      const saved = onSave ? await onSave(normalized) : normalized;
      setForm({ ...C.normalizeReport(saved) }); setDirty(false); setToast('Report saved');
    } catch (err) { setToast(err?.message || 'Report save failed'); }
    finally { setSaving(false); setTimeout(() => setToast(null), 3600); }
  };

  const activeRows = (form.division_rows || []).map((row, idx) => ({ row, idx })).filter((x) => !x.row.hidden);
  const hiddenRows = (form.division_rows || []).map((row, idx) => ({ row, idx })).filter((x) => x.row.hidden);
  const summaryRows = [
    ['Week of ' + new Date(derived.period_start + 'T00:00:00').toLocaleDateString('en-US', { timeZone: 'UTC', month: 'long', day: 'numeric' }) + '–' + new Date(derived.period_ending + 'T00:00:00').toLocaleDateString('en-US', { timeZone: 'UTC', day: 'numeric' }), derived.weekly_actual, derived.weekly_fc, derived.weekly_diff, derived.weekly_percent],
    ['Daily Sales Average (Annual FC/252) thru ' + new Date(derived.period_ending + 'T00:00:00').toLocaleDateString('en-US', { timeZone: 'UTC', month: 'numeric', day: 'numeric' }), derived.daily_avg_actual, derived.daily_avg_fc, derived.daily_avg_diff, derived.daily_avg_percent],
    ['MTD vs FC', derived.mtd_actual, derived.mtd_fc, derived.mtd_diff, derived.mtd_percent],
    ['YTD vs FC (' + derived.business_days_ytd + ' Days)', derived.ytd_actual, derived.ytd_fc, derived.ytd_diff, derived.ytd_percent],
  ];

  const eyebrow = { fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-secondary)' };
  const sectionHead = (label) => <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '0 0 18px' }}><span style={eyebrow}>{label}</span><span style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} /></div>;
  const commentary = [
    ['weekly_wins', 'Weekly Wins'], ['customer_service', 'Customer Service'], ['quotes_over_60', 'Quotes > 60% Chance of Closing'], ['projects_in_design', 'Projects in Design'], ['rma_warranty_returns', 'RMA Warranty / Returns for Repair'], ['new_sales_opportunities', 'New Sales Opportunities'], ['focus_for_week', 'Focus for the Week'], ['follow_up_next_week', 'Follow Up for Next Week'], ['open_discussion', 'Open Discussion'],
  ];

  return (
    <div style={{ maxWidth: 1160, margin: '0 auto', padding: '32px 40px 80px', display: 'flex', flexDirection: 'column', gap: 32 }}>
      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, borderBottom: '1px solid var(--border-subtle)', paddingBottom: 24 }}>
        <div><span style={{ ...eyebrow, color: 'var(--brand-accent)' }}>Edit Weekly Manager Report</span><h1 style={{ margin: '8px 0 0', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 36, color: 'var(--text-primary)' }}>Week {derived.week_number} · Period Ending {new Date(derived.period_ending + 'T00:00:00').toLocaleDateString('en-US', { timeZone: 'UTC' })}</h1></div>
        <div style={{ display: 'flex', gap: 10 }}><Button variant="secondary" onClick={onPreview}>Preview</Button><Button onClick={save} disabled={saving}>{saving ? 'Saving…' : dirty ? 'Save Changes' : 'Saved'}</Button></div>
      </header>

      <section>{sectionHead('Reporting Period')}
        <Card>
          <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr 1fr 1fr', gap: 14, alignItems: 'start' }}>
            <Input label="Week Number" type="number" min="1" max="53" value={derived.week_number} onChange={(e) => changeWeek(e.target.value)} hint="Week 1 ends 01/03/2026" />
            <Input label="Period Ending" value={derived.period_ending} readOnly hint="Fixed Saturday reporting calendar" />
            <Input label="Period Start" value={derived.period_start} readOnly />
            <Input label="Week Label" value={derived.week_label} readOnly />
          </div>
        </Card>
      </section>

      <section>{sectionHead('Calculated Financial Summary')}
        <Card padding="none" style={{ overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-mono)' }}>
            <thead><tr style={{ background: 'var(--surface-inset)' }}>{['Metric','Actual','2026 FC','Diff','%'].map((h, i) => <th key={h} style={{ textAlign: i === 0 ? 'left' : 'right', padding: '14px 18px', fontSize: 10.5, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', borderBottom: '1px solid var(--border-default)' }}>{h}</th>)}</tr></thead>
            <tbody>{summaryRows.map((r, i) => <tr key={r[0]} style={{ borderBottom: i < summaryRows.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}><td style={{ padding: '15px 18px', fontFamily: 'var(--font-sans)', color: 'var(--text-primary)', fontWeight: 500 }}>{r[0]}</td><td style={{ padding: '15px 18px', textAlign: 'right', color: 'var(--text-primary)' }}>{usd(r[1])}</td><td style={{ padding: '15px 18px', textAlign: 'right', color: 'var(--text-secondary)' }}>{usd(r[2])}</td><td style={{ padding: '15px 18px', textAlign: 'right', color: r[3] < 0 ? 'var(--status-behind)' : 'var(--status-ahead)' }}>{(r[3] > 0 ? '+' : '') + usd(r[3])}</td><td style={{ padding: '15px 18px', textAlign: 'right', color: r[4] < 0 ? 'var(--status-behind)' : 'var(--status-ahead)' }}>{pct(r[4])}</td></tr>)}</tbody>
          </table>
        </Card>
        <Card style={{ marginTop: 14 }}><div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}><Input label="Calculated Annual FC" prefix="$" align="right" value={derived.annual_fc} readOnly hint="Sum of monthly forecasts" /><Input label="Selected Month FC" prefix="$" align="right" value={derived.monthly_fc} readOnly hint="Forecast for current reporting month" /><Input label="Daily FC" prefix="$" align="right" value={derived.daily_avg_fc} readOnly hint="Annual FC ÷ 252 selling days" /></div></Card>
        <p style={{ margin: '10px 0 0', fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-secondary)' }}>Weekly totals are calculated from active division rows. MTD/YTD forecast uses the monthly forecast setup below and prorates the current month by elapsed business days.</p>
      </section>

      <section>{sectionHead('2026 Monthly Forecast Setup')}
        <Card style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12 }}>
            {C.MONTH_KEYS.map((key, idx) => <Input key={key} label={C.MONTH_LABELS[idx]} type="number" prefix="$" align="right" value={(form.monthly_forecasts || {})[key] || 0} onChange={(e) => updateMonthlyForecast(key, e.target.value)} />)}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 14, borderTop: '1px solid var(--border-subtle)', paddingTop: 14 }}>
            <Input label="Annual FC Total" prefix="$" align="right" value={derived.annual_fc} readOnly />
            <Input label="Current Month FC" prefix="$" align="right" value={derived.monthly_fc} readOnly />
            <Input label="Current Month Business Days" value={C.businessDaysInMonth(derived.report_year, derived.month_number)} readOnly />
          </div>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-secondary)' }}>These monthly forecast numbers carry forward with saved weekly reports. Change them here when the annual forecast plan changes; the annual total, monthly target, MTD forecast, YTD forecast, and daily forecast recalculate automatically.</p>
        </Card>
      </section>

      <section>{sectionHead('Division / Segment Entry')}
        <Card style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--text-secondary)' }}>Enter actual and forecast by division. These active rows add up to the weekly actual and weekly forecast above.</p>
          {activeRows.map(({ row, idx }, displayIdx) => {
            const p = C.calcPair(row.actual, row.fc);
            return <div key={idx} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 86px', gap: 10, alignItems: 'end' }}>
              <Input label={displayIdx === 0 ? 'Name' : ''} value={row.name} onChange={(e) => updateDivision(idx, { name: e.target.value })} />
              <Input label={displayIdx === 0 ? 'Actual' : ''} type="number" prefix="$" align="right" value={row.actual} onChange={(e) => updateDivision(idx, { actual: money(e.target.value) })} />
              <Input label={displayIdx === 0 ? 'FC' : ''} type="number" prefix="$" align="right" value={row.fc} onChange={(e) => updateDivision(idx, { fc: money(e.target.value) })} />
              <Input label={displayIdx === 0 ? 'Diff / %' : ''} value={(p.diff >= 0 ? '+' : '') + '$' + Math.round(p.diff).toLocaleString() + ' · ' + (p.percent > 0 ? '+' : '') + p.percent.toFixed(2) + '%'} readOnly />
              <Button variant="ghost" size="sm" onClick={() => hideDivision(idx)}>Hide</Button>
            </div>;
          })}
          {hiddenRows.length > 0 && <div style={{ marginTop: 8, borderTop: '1px solid var(--border-subtle)', paddingTop: 12 }}>
            <span style={eyebrow}>Hidden Rows</span>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 10 }}>{hiddenRows.map(({ row, idx }) => <Button key={idx} variant="secondary" size="sm" onClick={() => unhideDivision(idx)}>Unhide {row.name || 'Division'}</Button>)}</div>
          </div>}
          <div style={{ display: 'flex', gap: 10 }}><Button variant="secondary" size="sm" onClick={addDivision}>Add Row</Button><Button variant="ghost" size="sm" onClick={copyDivisionsOnly}>Carry Forward Latest Names</Button></div>
        </Card>
      </section>

      <section>{sectionHead('Executive Briefing Notes')}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {commentary.map(([key, label]) => <Textarea key={key} label={label} value={form[key] || ''} onChange={(e) => set({ [key]: e.target.value })} rows={4} />)}
        </div>
      </section>

      {toast && <div className="ffc-toast" style={{ position: 'fixed', right: 28, bottom: 28, zIndex: 80, display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-card-raised)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: '13px 18px', boxShadow: 'var(--shadow-lg)', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text-primary)' }}>{toast}</div>}
    </div>
  );
}

Object.assign(window, { EditReportView });