// Financial reports and monthly plans use canonical, authenticated API results.
function FFPlanningButton({ children, primary = false, ...props }) {
  return <button {...props} className={`ff-button ff-planning-button ${primary ? 'ff-planning-primary' : ''}`}>{children}</button>;
}
function FFPlanningError({ error, retry }) {
  return error ? <div role="alert" className="ff-planning-error"><span>{error}</span>{retry && <FFPlanningButton onClick={retry}>Tentar novamente</FFPlanningButton>}</div> : null;
}
function FFPlanningPercent({ bps }) { return <>{(bps / 100).toLocaleString('pt-BR', { maximumFractionDigits: 2 })}%</>; }
function FFSpendingReports({ onNavigate }) {
  const { currentMonth, currentMember } = useApp();
  const [result, setResult] = React.useState(null);
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(true);
  const [retry, setRetry] = React.useState(0);
  const month = `${currentMonth.year}-${String(currentMonth.month).padStart(2, '0')}`;
  const today = new Date();
  const asOf = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
  const key = `${currentMember?.id}:${month}:${asOf}`;
  React.useEffect(() => {
    let active = true;
    const controller = new AbortController(), token = localStorage.getItem('ff_token');
    setLoading(true); setError(''); setResult(null);
    apiFetch(`/reports/spending?month=${month}&asOf=${asOf}`, { signal: controller.signal })
      .then(data => { if (active && localStorage.getItem('ff_token') === token) setResult({ key, data }); })
      .catch(e => { if (active && e.name !== 'AbortError') setError(e.message); })
      .finally(() => { if (active) setLoading(false); });
    return () => { active = false; controller.abort(); };
  }, [key, retry]);
  const data = result?.key === key ? result.data : null;
  const panels = data ? [
    { title: 'Despesas por meio de pagamento', sub: `Sua responsabilidade no mês ${month.split('-').reverse().join('/')}. O percentual considera suas cotas, não o valor integral de terceiros.`, report: data.monthly, daily: false },
    { title: 'Dia a Dia · últimos 90 dias', sub: `${parseLocalDate(data.daily90.from).toLocaleDateString('pt-BR')} a ${parseLocalDate(data.daily90.to).toLocaleDateString('pt-BR')} · sua responsabilidade por descrição do gasto.`, report: data.daily90, daily: true },
  ] : [];
  return <section className="ff-planning-stack" aria-label="Relatórios de despesas e planejamento">
    <div className="ff-planning-heading"><div><h2>Análise para o orçamento</h2><p>Percentuais e valores da sua responsabilidade.</p></div><FFPlanningButton onClick={() => onNavigate('orcamento')}>Abrir orçamento mensal</FFPlanningButton></div>
    {loading && <Card><div role="status">Carregando relatórios…</div></Card>}
    <FFPlanningError error={error} retry={() => setRetry(r => r + 1)} />
    {panels.map(panel => <Card key={panel.title} className="ff-planning-card">
      <h3>{panel.title}</h3><p>{panel.sub}</p><strong className="ff-planning-total">{fmtBRL(panel.report.totalCents / 100)}</strong>
      {!panel.report.rows.length ? <EmptyState icon="BarChart2" title="Sem despesas no período" desc="Os gastos aparecerão aqui quando houver lançamentos sob sua responsabilidade." /> :
        <div className="ff-planning-stack">{panel.report.rows.map(row => <div key={row.key} className="ff-planning-report-row">
          <div className="ff-planning-row-title"><strong>{panel.daily ? row.description : row.name}</strong><span><FFPlanningPercent bps={row.percentageBps} /></span></div>
          <ProgressBar pct={row.percentageBps / 100} height={6} color="var(--accent)" showGradient={false} />
          <div className="ff-planning-row-values"><span>{fmtBRL(row.amountCents / 100)}</span>{panel.daily && <span>{row.count} lançamento{row.count === 1 ? '' : 's'} · estimativa mensal {fmtBRL(row.monthlyEstimateCents / 100)}</span>}</div>
        </div>)}</div>}
      {panel.daily && <p>A estimativa é a média de 30 dias do período. Use-a para decidir quais gastos recorrentes incluir no orçamento; ela não cria uma despesa.</p>}
    </Card>)}
  </section>;
}
function FFBudgetShareDraft(members, shares, currentMemberId) {
  const source = shares || [{ memberId: currentMemberId, percentageBps: 10000 }];
  const participants = [...members, ...source.filter(s => !members.some(m => m.id === s.memberId)).map(s => ({ id: s.memberId, name: 'Membro indisponível' }))];
  return participants.map(m => { const s = source.find(x => x.memberId === m.id); return { memberId: m.id, included: !!s, percent: s ? (s.percentageBps / 100).toFixed(2).replace('.', ',') : '' }; });
}
function FFBudgetDraft(plan, members, actor, month) {
  return { name: plan?.name || `Orçamento ${month.split('-').reverse().join('/')}`, version: plan?.version || 0,
    defaultShares: FFBudgetShareDraft(members, plan?.defaultShares, actor),
    categoryRules: (plan?.categoryRules || []).map(r => ({ categoryId: r.categoryId, shares: FFBudgetShareDraft(members, r.shares, actor) })),
    items: (plan?.items || []).map(i => ({ id: i.id, description: i.description, categoryId: i.categoryId, amount: (i.amountCents / 100).toFixed(2).replace('.', ','), customShares: !!i.sharesOverride, shares: FFBudgetShareDraft(members, i.sharesOverride || i.shares, actor) })),
  };
}
function FFBudgetShares({ label, members, value, onChange, disabled }) {
  return <fieldset className="ff-planning-shares" disabled={disabled}><legend>{label}</legend>
    <p>Marque somente os participantes. Os percentuais selecionados devem somar 100%.</p>
    {value.map((row, index) => { const member = members.find(m => m.id === row.memberId); return <div className="ff-planning-share-row" key={row.memberId}>
      <label className="ff-planning-checkbox"><input type="checkbox" checked={row.included} onChange={e => onChange(value.map((r, n) => n === index ? { ...r, included: e.target.checked } : r))} /><span>{member?.name || 'Membro indisponível'}</span></label>
      <label className="ff-planning-percent-input"><span className="ff-sr-only">Percentual de {member?.name || 'membro'} · {label}</span><Input aria-label={`Percentual de ${member?.name || 'membro'} · ${label}`} type="text" inputMode="decimal" value={row.percent} disabled={!row.included || disabled} onChange={e => onChange(value.map((r, n) => n === index ? { ...r, percent: e.target.value } : r))} /><span>%</span></label>
    </div>; })}
  </fieldset>;
}
function FFBudgetSummary({ plan, members, shared = false }) {
  return <Card className="ff-planning-card"><h3>{shared ? plan.name : plan.preview ? 'Prévia do orçamento' : 'Totais do orçamento salvo'}</h3>
    {shared && <p>Compartilhado por {members.find(m => m.id === plan.ownerMemberId)?.name || 'outro membro'} · somente os itens em que você participa. Consulta sem edição.</p>}
    <strong className="ff-planning-total">{fmtBRL(plan.totalCents / 100)}</strong>
    {(plan.totalsByMember || []).map(s => <div key={s.memberId} className="ff-planning-row-title"><span>{members.find(m => m.id === s.memberId)?.name || 'Membro'}</span><strong>{fmtBRL(s.amountCents / 100)}</strong></div>)}
    {(plan.items || []).map((item, index) => <div key={item.id || index} className="ff-planning-saved-item"><div className="ff-planning-row-title"><strong>{item.description}</strong><span>{fmtBRL(item.amountCents / 100)}</span></div>
      {!shared && <p>Divisão: {({ item: 'personalizada neste item', category: 'regra da categoria', default: 'padrão do orçamento' })[item.shareSource]}</p>}
      {item.shares.map(s => <div key={s.memberId} className="ff-planning-row-title"><span>{members.find(m => m.id === s.memberId)?.name || 'Membro'} · <FFPlanningPercent bps={s.percentageBps} /></span><span>{fmtBRL(s.amountCents / 100)}</span></div>)}
    </div>)}
  </Card>;
}
function OrcamentoMensal() {
  const { currentMonth, currentMember, members, categories } = useApp();
  const month = `${currentMonth.year}-${String(currentMonth.month).padStart(2, '0')}`;
  const key = `${currentMember?.id}:${month}`;
  const [loaded, setLoaded] = React.useState(null), [draftState, setDraftState] = React.useState(null);
  const [loading, setLoading] = React.useState(true), [saving, setSaving] = React.useState(false);
  const [loadError, setLoadError] = React.useState(''), [sharedError, setSharedError] = React.useState(''), [saveError, setSaveError] = React.useState(''), [notice, setNotice] = React.useState('');
  const [retry, setRetry] = React.useState(0);
  const [preview, setPreview] = React.useState(null), [previewing, setPreviewing] = React.useState(false), [previewError, setPreviewError] = React.useState('');
  const previewSequence = React.useRef(0), liveDraftSignature = React.useRef('');
  const liveKey = React.useRef(key); liveKey.current = key;
  const generation = React.useRef(0);
  const draft = draftState?.key === key ? draftState.data : null;
  const plans = loaded?.key === key ? loaded : null;
  const draftSignature = JSON.stringify(draft); liveDraftSignature.current = draftSignature;
  const currentPreview = preview?.key === key && preview.signature === draftSignature ? preview.plan : null;
  React.useEffect(() => {
    let active = true;
    generation.current++; previewSequence.current++; setSaving(false); setPreviewing(false); setPreview(null); setPreviewError('');
    const controller = new AbortController(), token = localStorage.getItem('ff_token');
    setLoading(true); setLoadError(''); setSharedError(''); setSaveError(''); setNotice(''); setLoaded(null); setDraftState(null);
    Promise.allSettled([apiFetch(`/budgets/${month}`, { signal: controller.signal }), apiFetch(`/budgets/${month}/shared`, { signal: controller.signal })]).then(([own, shared]) => {
      if (!active || localStorage.getItem('ff_token') !== token) return;
      setLoaded({ key, own: own.status === 'fulfilled' ? own.value : null, shared: shared.status === 'fulfilled' ? shared.value : [] });
      if (own.status === 'fulfilled') setDraftState({ key, data: FFBudgetDraft(own.value, members, currentMember.id, month) }); else if (own.reason.name !== 'AbortError') setLoadError(own.reason.message);
      if (shared.status === 'rejected' && shared.reason.name !== 'AbortError') setSharedError(shared.reason.message);
      setLoading(false);
    });
    return () => { active = false; controller.abort(); };
  }, [key, retry, members.map(m => m.id).join(':')]);
  function update(change) { previewSequence.current++; setPreviewing(false); setPreview(null); setPreviewError(''); setDraftState(s => s?.key === key ? { key, data: { ...s.data, ...change } } : s); setNotice(''); }
  function updateItem(index, change) { update({ items: draft.items.map((i, n) => n === index ? { ...i, ...change } : i) }); }
  async function calculatePreview() {
    if (previewing || saving || !draft) return;
    setPreviewError(''); setSaveError('');
    let payload; try { payload = window.FFBudgetInput.budgetToPayload(draft); } catch (e) { setPreviewError(e.message); return; }
    const requestKey = key, signature = draftSignature, sequence = ++previewSequence.current, token = localStorage.getItem('ff_token');
    setPreviewing(true); setPreview(null);
    try {
      const plan = await apiFetch(`/budgets/${month}/preview`, { method: 'POST', body: payload });
      if (sequence === previewSequence.current && liveKey.current === requestKey && liveDraftSignature.current === signature && localStorage.getItem('ff_token') === token) setPreview({ key, signature, plan });
    } catch (e) { if (sequence === previewSequence.current && liveKey.current === requestKey && localStorage.getItem('ff_token') === token) setPreviewError(e.message); }
    finally { if (sequence === previewSequence.current && liveKey.current === requestKey) setPreviewing(false); }
  }
  async function save(event) {
    event.preventDefault(); if (saving || !draft) return;
    if (!currentPreview) { setSaveError('Calcule e confira a prévia atual antes de salvar.'); return; }
    setSaveError(''); setNotice('');
    let payload; try { payload = window.FFBudgetInput.budgetToPayload(draft); } catch (e) { setSaveError(e.message); return; }
    const requestGeneration = generation.current, requestKey = key, token = localStorage.getItem('ff_token');
    setSaving(true);
    try {
      const plan = await apiFetch(`/budgets/${month}`, { method: 'PUT', body: payload });
      if (generation.current !== requestGeneration || liveKey.current !== requestKey || localStorage.getItem('ff_token') !== token) return;
      setLoaded(s => ({ ...(s || {}), key, own: plan })); setDraftState({ key, data: FFBudgetDraft(plan, members, currentMember.id, month) }); setPreview(null); setNotice('Orçamento salvo. Nenhuma despesa ou cobrança foi criada.');
    } catch (e) { if (generation.current === requestGeneration && liveKey.current === requestKey && localStorage.getItem('ff_token') === token) setSaveError(e.status === 409 ? 'O orçamento foi atualizado em outra tela. Seu rascunho está preservado. Recarregue a versão salva antes de editar novamente.' : e.message); }
    finally { if (generation.current === requestGeneration && liveKey.current === requestKey) setSaving(false); }
  }
  return <div className="ff-planning-page ff-planning-stack">
    <div className="ff-planning-heading"><div><h2>Orçamento mensal</h2><p>Planejamento de {month.split('-').reverse().join('/')} · seu plano pode incluir qualquer membro da família.</p></div></div>
    <Card className="ff-planning-card"><h3>Planeje com divisões flexíveis</h3><p>Defina uma divisão padrão. Uma regra por categoria substitui esse padrão; uma divisão por item tem prioridade sobre as duas. Quem não participa fica fora daquela despesa. Salvar o orçamento não cria lançamentos, receitas ou dívidas, nem altera o limite de Dia a Dia.</p></Card>
    {loading && <Card><div role="status">Carregando orçamento…</div></Card>}
    <FFPlanningError error={loadError} retry={() => setRetry(r => r + 1)} />
    {draft && <form onSubmit={save} className="ff-planning-stack" aria-label="Editar orçamento mensal">
      <fieldset disabled={saving} className="ff-planning-form-fieldset ff-planning-stack">
        <Card className="ff-planning-card"><label className="ff-planning-field">Nome do orçamento<Input value={draft.name} maxLength={120} onChange={e => update({ name: e.target.value })} /></label>
          <FFBudgetShares label="Divisão padrão" members={members} value={draft.defaultShares} onChange={defaultShares => update({ defaultShares })} disabled={saving} />
        </Card>
        <Card className="ff-planning-card"><h3>Regras por categoria</h3><p>Exemplo: moradia para todos; educação apenas para quem participa, em percentuais diferentes.</p>
          {!draft.categoryRules.length && <p>Sem regras específicas: os itens usam a divisão padrão.</p>}
          {draft.categoryRules.map((rule, index) => <section className="ff-planning-saved-item" key={rule.categoryId || index}>
            <label className="ff-planning-field">Categoria da regra {index + 1}<Select aria-label={`Categoria da regra ${index + 1}`} value={rule.categoryId} onChange={e => update({ categoryRules: draft.categoryRules.map((r, n) => n === index ? { ...r, categoryId: e.target.value } : r) })}><option value="">Selecione</option>{rule.categoryId && !categories.some(c => c.id === rule.categoryId) && <option value={rule.categoryId}>Categoria indisponível — selecione outra</option>}{categories.filter(c => c.id === rule.categoryId || !draft.categoryRules.some(r => r.categoryId === c.id)).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}</Select></label>
            <FFBudgetShares label={`Divisão da categoria ${index + 1}`} members={members} value={rule.shares} onChange={shares => update({ categoryRules: draft.categoryRules.map((r, n) => n === index ? { ...r, shares } : r) })} disabled={saving} />
            <FFPlanningButton type="button" onClick={() => update({ categoryRules: draft.categoryRules.filter((r, n) => n !== index) })}>Remover regra {index + 1}</FFPlanningButton>
          </section>)}
          <FFPlanningButton type="button" disabled={draft.categoryRules.length >= categories.length} onClick={() => update({ categoryRules: [...draft.categoryRules, { categoryId: categories.find(c => !draft.categoryRules.some(r => r.categoryId === c.id))?.id || '', shares: draft.defaultShares.map(s => ({ ...s })) }] })}>Adicionar regra por categoria</FFPlanningButton>
        </Card>
        <Card className="ff-planning-card"><h3>Despesas previstas</h3>{!draft.items.length && <p>Nenhum item no plano. Inclua gastos fixos e despesas do Dia a Dia que deseja reservar no orçamento.</p>}
          {draft.items.map((item, index) => <section key={item.id || index} className="ff-planning-saved-item" aria-label={`Item ${index + 1}`}>
            <label className="ff-planning-field">Descrição do item {index + 1}<Input value={item.description} maxLength={200} onChange={e => updateItem(index, { description: e.target.value })} /></label>
            <div className="ff-planning-fields"><label className="ff-planning-field">Categoria do item {index + 1}<Select aria-label={`Categoria do item ${index + 1}`} value={item.categoryId} onChange={e => updateItem(index, { categoryId: e.target.value })}><option value="">Selecione</option>{item.categoryId && !categories.some(c => c.id === item.categoryId) && <option value={item.categoryId}>Categoria indisponível — selecione outra</option>}{categories.map(c => <option value={c.id} key={c.id}>{c.name}</option>)}</Select></label>
              <label className="ff-planning-field">Valor do item {index + 1} (R$)<Input type="text" inputMode="decimal" value={item.amount} onChange={e => updateItem(index, { amount: e.target.value })} placeholder="0,00" /></label></div>
            <label className="ff-planning-checkbox"><input type="checkbox" checked={item.customShares} onChange={e => updateItem(index, { customShares: e.target.checked })} /><span>Divisão personalizada do item {index + 1}</span></label>
            {item.customShares ? <FFBudgetShares label={`Divisão do item ${index + 1}`} members={members} value={item.shares} onChange={shares => updateItem(index, { shares })} disabled={saving} /> : <p>{draft.categoryRules.some(r => r.categoryId === item.categoryId) ? 'Usa a divisão da categoria.' : 'Usa a divisão padrão.'}</p>}
            <FFPlanningButton type="button" onClick={() => update({ items: draft.items.filter((i, n) => n !== index) })}>Remover item {index + 1}</FFPlanningButton>
          </section>)}
          <FFPlanningButton type="button" onClick={() => update({ items: [...draft.items, { description: '', categoryId: '', amount: '', customShares: false, shares: draft.defaultShares.map(s => ({ ...s })) }] })}>Adicionar despesa prevista</FFPlanningButton>
        </Card>
      </fieldset>
      <FFPlanningError error={saveError} />
      {saveError.includes('outra tela') && <FFPlanningButton type="button" onClick={() => { if (window.confirm('Recarregar a versão salva descarta seu rascunho atual. Continuar?')) setRetry(r => r + 1); }}>Recarregar versão salva</FFPlanningButton>}
      {notice && <div role="status" className="ff-planning-notice">{notice}</div>}
      <FFPlanningError error={previewError} retry={calculatePreview} />
      <FFPlanningButton type="button" disabled={previewing || saving} onClick={calculatePreview}>{previewing ? 'Calculando…' : 'Calcular prévia'}</FFPlanningButton>
      {previewing && <div role="status">Calculando a divisão do orçamento…</div>}
      {currentPreview && <div aria-label="Prévia do orçamento"><FFBudgetSummary plan={currentPreview} members={members} /><p className="ff-planning-preview-note">Prévia não salva. Confira participantes, percentuais e valores antes de confirmar.</p></div>}
      <div className="ff-planning-save"><p>Calcule a prévia para conferir os valores. Qualquer alteração exige uma nova prévia antes de salvar.</p><FFPlanningButton primary type="submit" disabled={saving || !currentPreview}>{saving ? 'Salvando…' : 'Salvar orçamento'}</FFPlanningButton></div>
    </form>}
    {plans?.own && <FFBudgetSummary plan={plans.own} members={members} />}
    <h3>Planos compartilhados comigo</h3><FFPlanningError error={sharedError} retry={() => setRetry(r => r + 1)} />
    {!loading && !sharedError && plans && !plans.shared.length && <Card><p>Nenhum plano de outro membro inclui você neste mês.</p></Card>}
    {(plans?.shared || []).map(plan => <FFBudgetSummary key={plan.id} plan={plan} members={members} shared />)}
  </div>;
}
Object.assign(window, { FFSpendingReports, OrcamentoMensal });