/* ============================================================================
   FSC App — shell, filtros globais, abas (guias estilo Excel), roteamento.
   ============================================================================ */
const { useState: useStateApp, useMemo } = React;
const FSCa = window.FSC, UIa = window.FSCUI, IcoApp = window.FSCIcon;
const { fmt: fmtA } = FSCa;
const TabsA = window.FSCTabsA, TabsB = window.FSCTabsB;

const TABS = [
  { id: 'overview', label: 'Visão Geral', icon: 'dashboard', C: TabsA.OverviewTab },
  { id: 'cashflow', label: 'Fluxo de Caixa', icon: 'trendingUp', C: TabsA.CashFlowTab },
  { id: 'categories', label: 'Categorias', icon: 'pieChart', C: TabsA.CategoriesTab },
  { id: 'compare', label: 'Comparativo & Câmbio', icon: 'swap', C: TabsB.CompareTab },
  { id: 'accounts', label: 'Contas & Cartões', icon: 'creditCard', C: TabsB.AccountsTab },
  { id: 'entities', label: 'Entidades', icon: 'users', C: TabsB.EntitiesTab },
  { id: 'transactions', label: 'Transações', icon: 'list', C: TabsB.TransactionsTab },
];

function SegToggle({ label, value, onChange, options }) {
  return (
    <div className="fsc-seg" role="group" aria-label={label} title={label}>
      {options.map((o) => (
        <button key={o.value} type="button" onClick={() => onChange(o.value)}
          className={'fsc-seg-btn' + (o.value === value ? ' is-active' : '')}>{o.label}</button>
      ))}
    </div>
  );
}

function CockpitApp() {
  const raw = window.FSC_DATA;
  const [tab, setTab] = useStateApp('overview');
  const [filters, setFilters] = useStateApp({ year: 'all', month: 'all', last12: false });
  const [txFilter, setTxFilter] = useStateApp({ search: '', category: 'all', account: 'all', type: 'all' });
  const [regime, setRegime] = useStateApp('caixa');   // 'caixa' | 'competencia'
  const [moeda, setMoeda] = useStateApp('BRL');        // 'BRL' | 'EUR'

  // toggles globais: regime troca o bucket de tempo; moeda troca o valor exibido
  const bucket = (t) => (regime === 'competencia' ? t.competencia : t.ym);
  const val = (t) => (moeda === 'EUR' ? t.amountEur : t.amount);

  const data = useMemo(() => {
    const transactions = raw.transactions.map((t) => {
      const ym = bucket(t);
      return { ...t, ym, year: Number(ym.slice(0, 4)), amount: val(t) };
    });
    const months = Array.from(new Set(transactions.map((t) => t.ym))).sort();
    const years = Array.from(new Set(months.map((m) => Number(m.slice(0, 4))))).sort((a, b) => a - b);
    const budget = moeda === 'EUR' ? raw.budgetEur : raw.budget;
    const goals = raw.goals.map((g) => ({ ...g, target: moeda === 'EUR' ? g.targetEUR : g.targetBRL }));
    return { ...raw, transactions, months, years, budget, goals };
  }, [regime, moeda]);

  FSCa.setCurrency(moeda); // símbolo do formatador segue a moeda

  const { months, label } = useMemo(() => FSCa.periodMonths(data, filters), [data, filters]);
  const prevMonths = useMemo(() => FSCa.prevPeriodMonths(data, filters), [data, filters]);
  const trendMonths = useMemo(() => {
    const last = months[months.length - 1] || data.months[data.months.length - 1];
    const li = data.months.indexOf(last);
    return months.length >= 2 ? months : data.months.slice(Math.max(0, li - 11), li + 1);
  }, [data, months]);

  const drillTo = (p) => { setTxFilter({ search: '', category: 'all', account: 'all', type: 'all', ...p }); setTab('transactions'); };

  const yearOpts = [{ value: 'all', label: 'Todos os anos' }, ...data.years.map((y) => ({ value: y, label: String(y) }))];
  const monthOpts = [{ value: 'all', label: 'Todos os meses' }, ...FSCa.MONTHS_PT.map((m, i) => ({ value: i + 1, label: m }))];

  const ActiveTab = TABS.find((t) => t.id === tab).C;
  const ctx = { data, months, prevMonths, trendMonths, drillTo, txFilter, setTxFilter, moeda };

  return (
    <div className="fsc-app">
      <header className="fsc-header">
        <div className="fsc-brand">
          <img src="assets/logo-lockup.svg" alt="Sasaki Coelho" height="40" />
        </div>
        <div className="fsc-filters">
          <UIa.Select value={filters.last12 ? 'all' : filters.year} onChange={(v) => setFilters({ ...filters, year: v === 'all' ? 'all' : +v, last12: false })} icon="calendar" width={150}
            options={yearOpts} />
          <UIa.Select value={filters.last12 ? 'all' : filters.month} onChange={(v) => setFilters({ ...filters, month: v === 'all' ? 'all' : +v, last12: false })} width={140}
            options={monthOpts} />
          <button onClick={() => setFilters({ year: 'all', month: 'all', last12: !filters.last12 })}
            className={'fsc-preset' + (filters.last12 ? ' is-active' : '')}>
            <IcoApp name="repeat" size={15} />Últimos 12 meses
          </button>
          <SegToggle label="Regime contábil" value={regime} onChange={setRegime}
            options={[{ value: 'caixa', label: 'Caixa' }, { value: 'competencia', label: 'Competência' }]} />
          <SegToggle label="Moeda" value={moeda} onChange={setMoeda}
            options={[{ value: 'BRL', label: 'R$' }, { value: 'EUR', label: '€' }]} />
        </div>
      </header>

      <nav className="fsc-tabs" role="tablist">
        {TABS.map((t) => (
          <button key={t.id} role="tab" aria-selected={tab === t.id}
            className={'fsc-tab' + (tab === t.id ? ' is-active' : '')} onClick={() => setTab(t.id)}>
            <IcoApp name={t.icon} size={16} />{t.label}
          </button>
        ))}
      </nav>

      <div className="fsc-periodbar">
        <span className="fsc-eyebrow">Mostrando</span>
        <strong>{label}</strong>
        <span className="fsc-dot" />
        <span>{months.length} {months.length === 1 ? 'mês' : 'meses'}</span>
        {prevMonths.length > 0 && (
          <><span className="fsc-dot" /><span style={{ color: 'var(--text-faint)' }}>deltas vs. período anterior</span></>
        )}
      </div>

      <main className="fsc-main">
        <ActiveTab {...ctx} />
      </main>

      <footer className="fsc-footer">
        Família Sasaki Coelho · cockpit financeiro · dados de exemplo (mock) — substitua <code>window.FSC_DATA</code> em <code>data.js</code> pelos dados reais.
      </footer>
    </div>
  );
}

window.FSCApp = CockpitApp;