/* Finance & Operations — vue réelle uniquement, alimentée par D1.
 * Toutes les valeurs viennent de REVENUE_MONTHLY (col `finances` D1)
 * et des dépenses (col `expenses`). Aucune donnée mock.
 */

const StackedBars = ({ data, height = 200 }) => {
  if (!data || !data.length) return null;
  const max = Math.max(...data.map(d => d.rev || 0), 1);
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 8, height, padding: "4px 0" }}>
      {data.map((d, i) => {
        const total = ((d.rev || 0) / max) * (height - 30);
        const profitH = ((d.profit || 0) / max) * (height - 30);
        const costsH = Math.max(0, total - profitH);
        return (
          <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "stretch", gap: 4 }} title={`${d.m}: $${(d.rev || 0).toLocaleString()}`}>
            <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
              <div style={{ height: costsH, background: "oklch(0.32 0.03 248)", borderRadius: "3px 3px 0 0", marginBottom: 1 }}/>
              <div style={{ height: profitH, background: "linear-gradient(180deg, var(--accent), var(--accent-strong))", borderRadius: i === data.length - 1 ? "3px 3px 0 0" : "0" }}/>
            </div>
            <div className="mono" style={{ fontSize: 10, color: "var(--text-faint)", textAlign: "center" }}>{d.m}</div>
          </div>
        );
      })}
    </div>
  );
};

const EmptyState = ({ title, sub, icon = "chart", actionLabel, onAction }) => (
  <div className="card" style={{ padding: 36, textAlign: "center" }}>
    <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--bg-3)", display: "grid", placeItems: "center", margin: "0 auto 12px", color: "var(--text-dim)" }}>
      <Icon name={icon} size={22} />
    </div>
    <div style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
    <div className="muted" style={{ fontSize: 12, marginTop: 6, maxWidth: 360, margin: "6px auto 14px" }}>{sub}</div>
    {actionLabel && <button className="btn" data-variant="primary" onClick={onAction}><Icon name="plus" size={12} /> {actionLabel}</button>}
  </div>
);

const FIN_OVERRIDE_KEY = "kcc_finance_override_v1";
function loadFinOverride() {
  try { return JSON.parse(localStorage.getItem(FIN_OVERRIDE_KEY) || "{}"); } catch (_) { return {}; }
}
function saveFinOverride(patch) {
  const cur = loadFinOverride();
  const next = { ...cur, ...patch };
  localStorage.setItem(FIN_OVERRIDE_KEY, JSON.stringify(next));
  return next;
}

const Finance = ({ onNavigate }) => {
  // Re-render quand /api/sync hydrate REVENUE_MONTHLY
  if (window.useKccData) window.useKccData();
  const months = window.REVENUE_MONTHLY || [];
  const hasRevenue = months.length > 0;
  const [override, setOverride] = useState(loadFinOverride);
  const setOv = (patch) => setOverride(saveFinOverride(patch));
  const [, forceMonths] = useState(0);
  const persistMonth = async (idx, patch) => {
    const m = months[idx];
    if (!m) return;
    Object.assign(m, patch);
    forceMonths(x => x + 1);
    try {
      await fetch("/api/sync", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ col: "finances", items: [{ ...m }] }),
      });
    } catch (_) {}
  };
  const addMonth = () => {
    const next = { m: "Nouv", rev: 0, profit: 0 };
    months.push(next);
    forceMonths(x => x + 1);
  };

  const sparkRev = months.map(m => +m.rev || 0);
  const sparkProf = months.map(m => +m.profit || 0);
  const ytdRev = sparkRev.reduce((a, b) => a + b, 0);
  const ytdProf = sparkProf.reduce((a, b) => a + b, 0);
  const margin = ytdRev > 0 ? ((ytdProf / ytdRev) * 100).toFixed(1) : "0.0";

  const lastRev = sparkRev[sparkRev.length - 1] || 0;
  const prevRev = sparkRev[sparkRev.length - 2] || lastRev;
  const dRev = prevRev > 0 ? +(((lastRev - prevRev) / prevRev) * 100).toFixed(1) : 0;

  const lastProf = sparkProf[sparkProf.length - 1] || 0;
  const prevProf = sparkProf[sparkProf.length - 2] || lastProf;
  const dProf = prevProf !== 0 ? +(((lastProf - prevProf) / Math.abs(prevProf)) * 100).toFixed(1) : 0;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Finance & Opérations</div>
          <div className="page-sub">Vue consolidée · CAD · données réelles uniquement (D1)</div>
        </div>
        <div className="row">
          <button className="btn" onClick={async () => {
            try {
              const fin = await window.kccAPI?.amazon?.finance?.();
              if (fin && Array.isArray(fin.months)) {
                window.REVENUE_MONTHLY = fin.months;
                forceMonths(x => x + 1);
              }
              if (fin && typeof fin.cash === "number") setOv({ cash: fin.cash });
            } catch (e) { console.error("Amazon sync failed", e); }
          }} title="Synchroniser les revenus depuis Amazon SP-API">
            <Icon name="refresh" size={13} /> Sync Amazon
          </button>
          <button className="btn" onClick={() => onNavigate && onNavigate("expenses")}>
            <Icon name="receipt" size={13} /> Dépenses & Impôts
          </button>
          <button className="btn" onClick={() => onNavigate && onNavigate("import")}>
            <Icon name="upload" size={13} /> Importer
          </button>
        </div>
      </div>

      {/* KPI cards — réels uniquement */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <KpiCard
          label="Revenu YTD"
          prefix="$"
          value={hasRevenue ? fmtMoney(Math.round(ytdRev)) : "—"}
          delta={hasRevenue ? dRev : 0}
          spark={hasRevenue ? sparkRev : null}
          sparkColor="var(--accent)"
        />
        <KpiCard
          label="Profit YTD"
          prefix="$"
          value={hasRevenue ? fmtMoney(Math.round(ytdProf)) : "—"}
          delta={hasRevenue ? dProf : 0}
          suffix={hasRevenue ? ` · ${margin}%` : ""}
          spark={hasRevenue ? sparkProf : null}
          sparkColor="var(--green)"
        />
        <div className="card" style={{ padding: 14 }}>
          <div style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Cash en banque</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>
            $<EditableField
              value={override.cash ?? 0}
              onSave={(v) => setOv({ cash: Number(v) || 0 })}
              type="number"
              format={(v) => Number(v).toLocaleString()}
              width={100}
            />
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 2 }}>saisie manuelle</div>
        </div>
        <div className="card" style={{ padding: 14 }}>
          <div style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Burn rate / 30j</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>
            $<EditableField
              value={override.burn ?? 0}
              onSave={(v) => setOv({ burn: Number(v) || 0 })}
              type="number"
              format={(v) => Number(v).toLocaleString()}
              width={100}
            />
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 2 }}>
            {override.cash > 0 && override.burn > 0
              ? `~${Math.floor(override.cash / override.burn)} mois runway`
              : "saisie manuelle"}
          </div>
        </div>
      </div>

      {/* Revenue chart — seulement si données */}
      <div style={{ marginTop: 14 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Revenus vs coûts</div>
              <div className="card-sub">{hasRevenue ? `${months.length} mois importés depuis l'ancien site` : "Aucune donnée historique pour l'instant"}</div>
            </div>
            {hasRevenue && (
              <div className="row" style={{ marginLeft: "auto", fontSize: 11, color: "var(--text-dim)", gap: 12 }}>
                <span className="row" style={{gap:6}}><span style={{width:8,height:8,borderRadius:2,background:"oklch(0.32 0.03 248)"}}/>Coûts</span>
                <span className="row" style={{gap:6}}><span style={{width:8,height:8,borderRadius:2,background:"var(--accent)"}}/>Profit</span>
              </div>
            )}
          </div>
          <div className="card-body">
            {hasRevenue
              ? <StackedBars data={months} />
              : <EmptyState
                  title="Aucun revenu enregistré"
                  sub="KCC Holdings n'a pas encore de ventes. Les données apparaîtront ici dès le premier mois facturé."
                  icon="chart"
                  actionLabel="Importer un historique"
                  onAction={() => onNavigate && onNavigate("import")}
                />
            }
          </div>
        </div>
      </div>

      {/* Saisie manuelle des mois */}
      {hasRevenue && (
        <div className="card" style={{ marginTop: 14, padding: 0, overflow: "auto" }}>
          <div className="card-head" style={{ padding: 14 }}>
            <div>
              <div className="card-title">Mensualités — édition manuelle</div>
              <div className="card-sub">Modifie un mois en cliquant sur la valeur · ajoute un mois si manquant</div>
            </div>
            <button className="btn" data-variant="ghost" onClick={addMonth}>
              <Icon name="plus" size={12} /> Ajouter un mois
            </button>
          </div>
          <table className="table">
            <thead><tr><th>Mois</th><th style={{textAlign:"right"}}>Revenu</th><th style={{textAlign:"right"}}>Profit</th><th style={{textAlign:"right"}}>Marge</th></tr></thead>
            <tbody>
              {months.map((m, i) => {
                const marge = m.rev > 0 ? ((m.profit / m.rev) * 100).toFixed(1) : "0.0";
                return (
                  <tr key={i}>
                    <td>
                      <EditableField value={m.m} onSave={(v) => persistMonth(i, { m: v })} width={80}/>
                    </td>
                    <td className="mono" style={{ textAlign: "right" }}>
                      $<EditableField value={m.rev || 0} onSave={(v) => persistMonth(i, { rev: Number(v) || 0 })} type="number" format={(v) => Number(v).toLocaleString()} width={90}/>
                    </td>
                    <td className="mono" style={{ textAlign: "right" }}>
                      $<EditableField value={m.profit || 0} onSave={(v) => persistMonth(i, { profit: Number(v) || 0 })} type="number" format={(v) => Number(v).toLocaleString()} width={90}/>
                    </td>
                    <td className="mono" style={{ textAlign: "right", color: marge < 10 ? "var(--amber)" : "var(--green)" }}>{marge}%</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {/* Lien vers dépenses */}
      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 14 }}>
        <div className="card" style={{ padding: 18 }}>
          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Dépenses & Impôts (Québec)</div>
          <div className="muted" style={{ fontSize: 12, marginBottom: 14 }}>
            Suivi des dépenses récurrentes (SaaS, télécom, fournitures), photos de factures, TPS 5% / TVQ 9.975% remboursables (CTI/RTI), catégories T2125 / TP-80 pour ton comptable.
          </div>
          <button className="btn" data-variant="primary" onClick={() => onNavigate && onNavigate("expenses")}>
            <Icon name="receipt" size={13} /> Ouvrir les dépenses
          </button>
        </div>

        <div className="card" style={{ padding: 18 }}>
          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Importer un historique</div>
          <div className="muted" style={{ fontSize: 12, marginBottom: 14 }}>
            CSV Seller Central, relevés bancaires, ou rapports Amazon. Les données sont écrites directement dans D1 et visibles partout.
          </div>
          <button className="btn" onClick={() => onNavigate && onNavigate("import")}>
            <Icon name="upload" size={13} /> Aller à l'import
          </button>
        </div>
      </div>
    </div>
  );
};

window.Finance = Finance;