// Bellia — Module Ventes (variante B : tabs pill + hero KPI + tableau)

const VENTES_TABS = [
  { id: 'ca',     label: 'CA Général' },
  { id: 'panier', label: 'Panier moyen' },
  { id: 'modes',  label: 'Modes de vente' },
  { id: 'regl',   label: 'Modes de règlement' },
  { id: 'rep',    label: 'Répartition' },
  { id: 'z',      label: 'Ticket Z' },
  { id: 'tva',    label: 'TVA collectée' },
];

const VENTES_SERVICES = [
  { id: 'dej',  name: 'Déjeuner',          tickets: 1480, panier: 28.50, ca: 42180, evol: 8.4, color: C.orange },
  { id: 'din',  name: 'Dîner',             tickets: 1120, panier: 45.80, ca: 51296, evol: 6.2, color: C.orangeDp },
  { id: 'brn',  name: 'Brunch week-end',   tickets: 380,  panier: 32.10, ca: 12198, evol: 14.7, color: C.warn },
];

const VentesScreen = ({ onNav }) => {
  const [tab, setTab] = React.useState('ca');
  const [range, setRange] = React.useState('30j');

  return (
    <PageShell current="ventes" onNav={onNav}>
      <Header
        title="Ventes"
        subtitle="Cantine Corner — République · mai 2026"
        right={<>
          <Btn kind="ghost" icon={<Icon name="filter" size={14} color={C.ink2} />}>Filtres</Btn>
          <Btn kind="primary" icon={<Icon name="download" size={14} />}>Exporter</Btn>
        </>}
      />

      {/* ====== TABS PILL ====== */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, marginBottom: 22, flexWrap: 'wrap' }}>
        <div style={{
          display: 'inline-flex', padding: 5, background: C.cardWash, border: `1px solid ${C.line}`,
          borderRadius: 999, gap: 2, overflowX: 'auto',
        }}>
          {VENTES_TABS.map(t => {
            const active = tab === t.id;
            return (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                padding: '8px 16px', borderRadius: 999, background: active ? C.card : 'transparent',
                color: active ? C.ink : C.mute, border: active ? `1px solid ${C.line}` : '1px solid transparent',
                cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap',
                boxShadow: active ? '0 1px 2px rgba(0,0,0,0.04)' : 'none',
              }}>{t.label}</button>
            );
          })}
        </div>

        <div style={{ display: 'inline-flex', padding: 4, background: C.card, border: `1px solid ${C.line}`, borderRadius: 999, gap: 2 }}>
          {[{ id: '7j', l: '7 jours' }, { id: '30j', l: '30 jours' }, { id: 'ytd', l: 'YTD' }].map(p => (
            <button key={p.id} onClick={() => setRange(p.id)} style={{
              padding: '7px 14px', borderRadius: 999, background: range === p.id ? C.orange : 'transparent',
              color: range === p.id ? '#fff' : C.mute, border: 'none', cursor: 'pointer', fontFamily: 'inherit',
              fontSize: 11, fontWeight: 600,
            }}>{p.l}</button>
          ))}
        </div>
      </div>

      {/* ====== HERO + KPIs ====== */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 18, alignItems: 'stretch' }}>
        {/* Hero: CA TTC */}
        <Card style={{ padding: 26 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontSize: 11, color: C.mute, fontWeight: 600, letterSpacing: 0.6 }}>CA TTC · MAI 2026</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 6 }}>
                <div style={{ fontSize: 48, fontWeight: 700, color: C.ink, fontVariantNumeric: 'tabular-nums', letterSpacing: -1.2, lineHeight: 1 }}>{eur(MONTH_TOTAL)}</div>
                <Pill kind="ok" icon={<Icon name="trendUp" size={11} />}>+8,1 % vs N-1</Pill>
              </div>
              <div style={{ marginTop: 10, fontSize: 12, color: C.mute }}>
                Objectif <span style={{ color: C.ink2, fontWeight: 600 }}>{eur(92000)}</span> · <span style={{ color: C.orangeDp, fontWeight: 600 }}>{pct((MONTH_TOTAL / 92000) * 100, 0)}</span> atteint
              </div>
            </div>
            <div style={{ display: 'flex', gap: 14 }}>
              <Legend dot={C.orange} label="2026" />
              <Legend dot={C.mute2} label="2025" dashed />
            </div>
          </div>

          <div style={{ marginTop: 18 }}>
            <AreaLineChart data={SALES_30} prevData={SALES_30_PREV} height={250} />
          </div>
        </Card>

        {/* 4 KPI verticaux compactés en grille */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <KpiCompact label="CA HT" value={eur(70866)} delta="+8,1 %" deltaKind="ok" />
          <KpiCompact label="Tickets" value={num(2980)} delta="+5,2 %" deltaKind="ok" />
          <KpiCompact label="Panier moyen" value={eur(28.60, 2)} delta="+2,7 %" deltaKind="ok" />
          <KpiCompact label="TVA collectée" value={eur(14374)} delta="à exporter" deltaKind="warn" />

          <Card style={{ gridColumn: 'span 2', padding: 18, background: C.cardWash }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 11, background: C.orangeWh, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="sparkles" size={17} color={C.orangeDp} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: C.orangeDp, fontWeight: 700, letterSpacing: 0.6 }}>INSIGHT BELLIA IA</div>
                <div style={{ fontSize: 12, color: C.ink, marginTop: 3, fontWeight: 500, lineHeight: 1.4 }}>
                  Les dîners du jeudi génèrent {pct(18)} de panier en plus depuis 3 semaines.
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* ====== ROW 2 — bar chart + breakdown ====== */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 18, marginTop: 18 }}>
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: C.ink }}>CA par jour — 14 derniers jours</div>
              <div style={{ fontSize: 11, color: C.mute, marginTop: 3 }}>Barres = 2026, ombres = 2025</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Pill kind="neutral">Tous services</Pill>
              <Pill kind="neutral">Tous modes</Pill>
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <BarChartGrouped data={SALES_30.slice(-14)} prevData={SALES_30_PREV.slice(-14)} height={220} />
          </div>
        </Card>

        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: C.ink }}>Top 5 produits</div>
            <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: C.orangeDp, fontWeight: 600, fontSize: 11, fontFamily: 'inherit' }}>Voir tout →</button>
          </div>
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { n: 'Burger maison', c: 9842, pct: 78 },
              { n: 'Salade de saison', c: 6210, pct: 49 },
              { n: 'Pavé de saumon', c: 5680, pct: 45 },
              { n: 'Tartare de bœuf', c: 4920, pct: 39 },
              { n: 'Tiramisu maison', c: 3180, pct: 25 },
            ].map((p, i) => (
              <div key={i}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                  <div style={{ fontSize: 12, color: C.ink, fontWeight: 500 }}>{p.n}</div>
                  <div style={{ fontSize: 12, color: C.ink, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{eur(p.c)}</div>
                </div>
                <div style={{ height: 5, borderRadius: 999, background: C.lineSoft, overflow: 'hidden' }}>
                  <div style={{ width: `${p.pct}%`, height: '100%', background: i === 0 ? C.orange : C.orangeSft }} />
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* ====== TABLE — détail par service ====== */}
      <Card style={{ padding: 0, marginTop: 18, overflow: 'hidden' }}>
        <div style={{ padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${C.lineSoft}` }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700, color: C.ink }}>Ventilation par service</div>
            <div style={{ fontSize: 11, color: C.mute, marginTop: 2 }}>3 services · 2 980 tickets au total</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Btn kind="ghost" size="sm">Personnaliser les colonnes</Btn>
            <Btn kind="soft" size="sm" icon={<Icon name="download" size={13} />}>CSV</Btn>
          </div>
        </div>

        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ background: C.cardWash }}>
              {['Service', 'Tickets', 'Panier moyen', 'CA TTC', 'Évolution N-1', 'Part'].map((h, i) => (
                <th key={h} style={{
                  padding: '12px 20px', textAlign: i === 0 ? 'left' : i === 5 ? 'left' : 'right',
                  fontSize: 10, color: C.mute, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
                  borderBottom: `1px solid ${C.line}`,
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {VENTES_SERVICES.map((s, i) => {
              const total = VENTES_SERVICES.reduce((a, x) => a + x.ca, 0);
              const part = (s.ca / total) * 100;
              return (
                <tr key={s.id} style={{ borderBottom: i < VENTES_SERVICES.length - 1 ? `1px solid ${C.lineSoft}` : 'none' }}>
                  <td style={{ padding: '16px 20px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                      <span style={{ width: 10, height: 10, borderRadius: 999, background: s.color }} />
                      <div>
                        <div style={{ fontSize: 13, color: C.ink, fontWeight: 600 }}>{s.name}</div>
                        <div style={{ fontSize: 10, color: C.mute, marginTop: 2 }}>{i === 0 ? '12 h – 14 h 30' : i === 1 ? '19 h – 22 h 30' : 'sam. dim. 10 h – 15 h'}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ padding: '16px 20px', textAlign: 'right', fontSize: 13, color: C.ink2, fontVariantNumeric: 'tabular-nums' }}>{num(s.tickets)}</td>
                  <td style={{ padding: '16px 20px', textAlign: 'right', fontSize: 13, color: C.ink2, fontVariantNumeric: 'tabular-nums' }}>{eur(s.panier, 2)}</td>
                  <td style={{ padding: '16px 20px', textAlign: 'right', fontSize: 14, color: C.ink, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{eur(s.ca)}</td>
                  <td style={{ padding: '16px 20px', textAlign: 'right' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: C.ok, fontSize: 12, fontWeight: 600 }}>
                      <Icon name="trendUp" size={12} /> {signedPct(s.evol)}
                    </span>
                  </td>
                  <td style={{ padding: '16px 20px', width: 180 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div style={{ flex: 1, height: 6, borderRadius: 999, background: C.lineSoft, overflow: 'hidden' }}>
                        <div style={{ width: `${part}%`, height: '100%', background: s.color }} />
                      </div>
                      <span style={{ fontSize: 11, color: C.ink2, fontWeight: 600, fontVariantNumeric: 'tabular-nums', minWidth: 30, textAlign: 'right' }}>{pct(part, 0)}</span>
                    </div>
                  </td>
                </tr>
              );
            })}
            <tr style={{ background: C.cardWash }}>
              <td style={{ padding: '14px 20px', fontSize: 12, color: C.mute, fontWeight: 700, letterSpacing: 0.4 }}>TOTAL</td>
              <td style={{ padding: '14px 20px', textAlign: 'right', fontSize: 13, color: C.ink, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>2 980</td>
              <td style={{ padding: '14px 20px', textAlign: 'right', fontSize: 13, color: C.ink, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{eur(35.27, 2)}</td>
              <td style={{ padding: '14px 20px', textAlign: 'right', fontSize: 14, color: C.ink, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{eur(105674)}</td>
              <td style={{ padding: '14px 20px', textAlign: 'right' }}>
                <span style={{ color: C.ok, fontSize: 12, fontWeight: 700 }}>+8,1 %</span>
              </td>
              <td style={{ padding: '14px 20px', fontSize: 12, color: C.mute, fontWeight: 700 }}>100 %</td>
            </tr>
          </tbody>
        </table>
      </Card>
    </PageShell>
  );
};

const KpiCompact = ({ label, value, delta, deltaKind }) => (
  <div style={{
    background: C.card, border: `1px solid ${C.line}`, borderRadius: 18, padding: 16,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 96,
  }}>
    <div style={{ fontSize: 10, color: C.mute, fontWeight: 700, letterSpacing: 0.5 }}>{label.toUpperCase()}</div>
    <div>
      <div style={{ fontSize: 22, fontWeight: 700, color: C.ink, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.4, lineHeight: 1 }}>{value}</div>
      <div style={{ marginTop: 8 }}><Pill kind={deltaKind} size="sm">{delta}</Pill></div>
    </div>
  </div>
);

window.VentesScreen = VentesScreen;