/* Dashboard — KPIs, revenue chart, alerts, top margins, tasks */

const Bars = ({ data, height = 160, accentKey = "rev", subKey = "profit" }) => {
  const max = Math.max(...data.map((d) => d[accentKey]));
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height, padding: "0 2px" }}>
      {data.map((d, i) => {
        const h = (d[accentKey] / max) * (height - 24);
        const ph = (d[subKey] / max) * (height - 24);
        const isLast = i === data.length - 1;
        return (
          <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "stretch", gap: 4, minWidth: 0 }} title={`${d.m} · Rev ${fmtMoney(d.rev)} · Profit ${fmtMoney(d.profit)}`}>
            <div style={{ flex: 1, display: "flex", alignItems: "flex-end", justifyContent: "center", position: "relative" }}>
              <div style={{
                width: "100%",
                height: h,
                background: isLast
                  ? "linear-gradient(180deg, var(--accent), var(--accent-strong))"
                  : "linear-gradient(180deg, oklch(0.35 0.04 248), oklch(0.28 0.03 248))",
                borderRadius: "3px 3px 0 0",
                position: "relative",
                transition: "height 200ms ease-out"
              }}>
                <div style={{
                  position: "absolute", left: 0, right: 0, bottom: 0,
                  height: ph,
                  background: isLast ? "oklch(0.85 0.18 248)" : "oklch(0.5 0.04 248)",
                  borderRadius: "3px 3px 0 0",
                  opacity: 0.65
                }}/>
              </div>
            </div>
            <div className="mono" style={{ fontSize: 10, color: "var(--text-faint)", textAlign: "center", lineHeight: 1 }}>{d.m}</div>
          </div>
        );
      })}
    </div>
  );
};

const TaskRow = ({ t }) => {
  const status = TASK_STATUSES.find((s) => s.id === t.status);
  const prioTone = t.prio === "haute" ? "red" : t.prio === "moyenne" ? "amber" : "muted";
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr auto auto auto", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: "1px solid var(--border-subtle)", fontSize: 12.5 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
        <Avatar user={t.assignee} size="sm" />
        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t.title}</span>
      </div>
      <Badge tone={prioTone}>{t.prio}</Badge>
      <Badge tone={status.tone} dot>{status.label}</Badge>
      <span className="mono" style={{ fontSize: 11, color: "var(--text-dim)", minWidth: 50, textAlign: "right" }}>{t.due}</span>
    </div>
  );
};

// Dispatch — bento (default) or classic (legacy)
const Dashboard = (props) => props.dashLayout === "classic"
  ? <DashboardClassic {...props}/>
  : <DashboardBento {...props}/>;

// ── Bento layout ──────────────────────────────────────────────────
const DashboardBento = ({ onNavigate }) => {
  const [me] = useCurrentUser();
  // Re-render when D1 / localStorage data lands
  if (window.useKccData) window.useKccData();
  const sparkRev = REVENUE_MONTHLY.map(m => m.rev);
  const sparkP   = REVENUE_MONTHLY.map(m => m.profit);
  const topMargs = [...PRODUCTS].sort((a,b) => b.margin - a.margin).slice(0, 4);

  // Coherent KPIs — last value of the same series that feeds the spark
  const lastRev = sparkRev[sparkRev.length - 1] || 0;
  const prevRev = sparkRev[sparkRev.length - 2] || lastRev;
  const lastProf = sparkP[sparkP.length - 1] || 0;
  const prevProf = sparkP[sparkP.length - 2] || lastProf;
  const dRev  = prevRev  > 0 ? +(((lastRev  - prevRev)  / prevRev)  * 100).toFixed(1) : 0;
  const dProf = prevProf !== 0 ? +(((lastProf - prevProf) / Math.abs(prevProf)) * 100).toFixed(1) : 0;
  const arrowRev = dRev >= 0 ? "↑" : "↓";
  const arrowProf = dProf >= 0 ? "↑" : "↓";
  const colorRev = dRev >= 0 ? "var(--green)" : "var(--red)";
  const colorProf = dProf >= 0 ? "var(--green)" : "var(--red)";
  const bento = (style) => ({
    background: "var(--bg-1)", border: "1px solid var(--border-subtle)",
    borderRadius: 14, padding: 18, ...style,
  });
  const Spark = ({ data, color = "var(--accent)", h = 36, w = 200 }) => {
    const lo = Math.min(...data), hi = Math.max(...data);
    const pts = data.map((v, i) => `${((i/(data.length-1))*w).toFixed(1)},${(h - ((v-lo)/(hi-lo||1))*h).toFixed(1)}`);
    return (
      <svg width={w} height={h} style={{ display: "block" }}>
        <polygon points={`0,${h} ${pts.join(" ")} ${w},${h}`} fill={color} opacity="0.16"/>
        <polyline points={pts.join(" ")} fill="none" stroke={color} strokeWidth="1.6"/>
      </svg>
    );
  };
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Bonjour {me.name}.</div>
          <div className="page-sub">Vendredi 10 mai 2026 · 14h32 · Vue consolidée KCC Holdings</div>
        </div>
        <div className="row">
          <button className="btn" data-variant="ghost"><Icon name="calendar" size={13}/> 30 derniers jours</button>
          <button className="btn" onClick={() => { try { const csv = "Produit,ASIN,Marge,BSR\n" + (window.PRODUCTS||[]).map(p => `"${p.name||""}",${p.asin||""},${p.margin||0},${p.bsr||0}`).join("\n"); const blob = new Blob([csv], { type:"text/csv" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "kcc-export-"+new Date().toISOString().slice(0,10)+".csv"; a.click(); URL.revokeObjectURL(url); } catch(_){} }}><Icon name="download" size={13}/> Exporter</button>
          <button className="btn" data-variant="primary" onClick={() => onNavigate && onNavigate("research")}><Icon name="plus" size={13}/> Nouveau produit</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gridAutoRows: "min-content", gap: 12 }}>
        {/* Hero — span 2x2 */}
        <div style={bento({ gridColumn: "span 2", gridRow: "span 2", background: "linear-gradient(135deg, color-mix(in oklch, var(--accent) 14%, var(--bg-1)), var(--bg-1))" })}>
          <div style={{ fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--text-faint)" }}>Revenu 30 jours</div>
          <div className="num" style={{ fontSize: 48, fontWeight: 600, letterSpacing: "-.02em", marginTop: 10 }}>${fmtMoney(lastRev)}</div>
          <div style={{ fontSize: 13, color: colorRev, marginTop: 4 }}>{arrowRev} {Math.abs(dRev)}% vs période précédente</div>
          <div style={{ marginTop: 18 }}>
            <Spark data={sparkRev} color="var(--accent)" w={380} h={72}/>
          </div>
        </div>

        <div style={bento()}>
          <div style={{ fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--text-faint)" }}>Marge nette</div>
          <div className="num" style={{ fontSize: 28, fontWeight: 600, marginTop: 8 }}>${fmtMoney(lastProf)}</div>
          <div style={{ fontSize: 11.5, color: colorProf, marginTop: 3 }}>{arrowProf} {Math.abs(dProf)}%</div>
          <Spark data={sparkP} color="var(--green)" w={160} h={36}/>
        </div>

        <div style={bento({ background: "color-mix(in oklch, var(--red) 14%, var(--bg-1))", cursor: "pointer" })} onClick={() => onNavigate("research")}>
          <div style={{ fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--text-faint)" }}>Alertes critiques</div>
          <div className="num" style={{ fontSize: 48, fontWeight: 600, marginTop: 6, color: "var(--red)" }}>{(ALERTS || []).filter(a => a.tone === "red").length}</div>
          <div style={{ fontSize: 11.5, color: "var(--text-dim)", marginTop: 3 }}>{(ALERTS || []).filter(a => a.tone === "amber").length} en attention</div>
        </div>

        {/* Top margins — span 2 */}
        <div style={bento({ gridColumn: "span 2" })}>
          <div style={{ display: "flex", alignItems: "baseline", marginBottom: 12 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600 }}>Top marges du jour</div>
            <div style={{ marginLeft: "auto", fontSize: 10.5, color: "var(--text-faint)" }}>Marge nette ↓</div>
          </div>
          {topMargs.map((p, i) => (
            <div key={p.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderTop: i ? "1px solid var(--border-subtle)" : "none" }}>
              <div className="mono" style={{ fontSize: 10.5, color: "var(--text-faint)", width: 18 }}>{(i+1).toString().padStart(2,"0")}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.name}</div>
                <div className="row" style={{ gap: 4, marginTop: 2 }}>
                  <Asin value={p.asin} />
                  <span className="mono" style={{ fontSize: 10.5, color: "var(--text-faint)" }}>· BSR {p.bsr.toLocaleString()}</span>
                </div>
              </div>
              <div className="num" style={{ fontSize: 14, fontWeight: 600, color: "var(--green)" }}>{p.margin.toFixed(1)}%</div>
            </div>
          ))}
        </div>

        <div style={bento()}>
          <div style={{ fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--text-faint)" }}>Velocité 7j</div>
          <div className="num" style={{ fontSize: 28, fontWeight: 600, marginTop: 8 }}>9.2 <span style={{ fontSize: 12, color: "var(--text-faint)" }}>u/j</span></div>
          <Spark data={[7,9,8,10,11,9,12,9]} color="var(--accent)" w={160} h={36}/>
        </div>

        <div style={bento()}>
          <div style={{ fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--text-faint)" }}>Trésorerie</div>
          <div className="num" style={{ fontSize: 28, fontWeight: 600, marginTop: 8 }}>${fmtMoney(58400)}</div>
          <div style={{ fontSize: 11.5, color: "var(--text-dim)", marginTop: 3 }}>↑ 12% buffer</div>
        </div>

        {/* Alertes feed — span 4 */}
        <div style={bento({ gridColumn: "span 4", padding: 0 })}>
          <div style={{ display: "flex", alignItems: "baseline", padding: "16px 18px 10px" }}>
            <div style={{ fontSize: 12.5, fontWeight: 600 }}>Alertes du jour</div>
            <div style={{ marginLeft: 10, fontSize: 10.5, color: "var(--text-faint)" }}>5 alertes · 2 critiques · 2 attention</div>
            <button className="btn" data-variant="ghost" data-size="sm" style={{ marginLeft: "auto" }}>Tout voir</button>
          </div>
          {ALERTS.map((a) => (
            <div key={a.id} onClick={() => onNavigate(a.page)} style={{
              display: "flex", gap: 12, padding: "10px 18px", cursor: "pointer",
              borderTop: "1px solid var(--border-subtle)"
            }}>
              <span style={{ width: 6, marginTop: 6, height: 6, borderRadius: 999, background: `var(--${a.tone})`, flexShrink: 0, boxShadow: `0 0 0 3px var(--${a.tone}-soft)` }}/>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 550 }}>{a.title}</div>
                <div style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{a.sub}</div>
              </div>
              <div className="mono" style={{ fontSize: 10.5, color: "var(--text-faint)", whiteSpace: "nowrap" }}>{a.time}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ── Classic (legacy) ──────────────────────────────────────────────
const DashboardClassic = ({ onNavigate }) => {
  const [me] = useCurrentUser();
  // Re-render when D1 data lands
  if (window.useKccData) window.useKccData();
  const topMargins = [...PRODUCTS].sort((a, b) => b.margin - a.margin).slice(0, 4);
  const revSpark = REVENUE_MONTHLY.map((m) => m.rev);
  const profSpark = REVENUE_MONTHLY.map((m) => m.profit);

  // Coherent KPIs — derived from the SAME series that feeds the sparks
  const last = revSpark[revSpark.length - 1] || 0;
  const prev = revSpark[revSpark.length - 2] || last;
  const lastP = profSpark[profSpark.length - 1] || 0;
  const prevP = profSpark[profSpark.length - 2] || lastP;
  const revDelta  = prev  > 0 ? +(((last  - prev)  / prev)  * 100).toFixed(1) : 0;
  const profDelta = prevP > 0 ? +(((lastP - prevP) / prevP) * 100).toFixed(1) : 0;
  const activeCount = PRODUCTS.filter((p) => p.status === "stock").length;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Bonjour {me.name}.</div>
          <div className="page-sub">Vendredi 10 mai 2026 · 14h32 · Vue consolidée KCC Holdings</div>
        </div>
        <div className="row">
          <button className="btn" data-variant="ghost"><Icon name="calendar" size={13} /> 30 derniers jours</button>
          <button className="btn" onClick={() => { try { const csv = "Produit,ASIN,Marge,BSR\n" + (window.PRODUCTS||[]).map(p => `"${p.name||""}",${p.asin||""},${p.margin||0},${p.bsr||0}`).join("\n"); const blob = new Blob([csv], { type:"text/csv" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "kcc-export-"+new Date().toISOString().slice(0,10)+".csv"; a.click(); URL.revokeObjectURL(url); } catch(_){} }}><Icon name="download" size={13} /> Exporter</button>
          <button className="btn" data-variant="primary" onClick={() => onNavigate && onNavigate("research")}><Icon name="plus" size={13} /> Nouveau produit</button>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <KpiCard label="Revenu 30j"        prefix="$" value={fmtMoney(last)}    delta={revDelta}  spark={revSpark}  sparkColor="var(--accent)" />
        <KpiCard label="Marge nette 30j"   prefix="$" value={fmtMoney(lastP)}   delta={profDelta} spark={profSpark} sparkColor="var(--green)" />
        <KpiCard label="Produits actifs"               value={activeCount + " / " + PRODUCTS.length} delta={0} deltaUnit="" />
        <KpiCard label="Alertes critiques"             value="2" delta={-33.3} muted spark={[3,4,3,5,4,3,2]} sparkColor="var(--red)" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: "2fr 1fr", marginTop: 14 }}>
        {/* Revenue chart */}
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Revenus & marges · 13 derniers mois</div>
              <div className="card-sub">Période courante : <span className="mono">mai 2026</span> · Marge moy. <span className="mono" style={{color:"var(--green)"}}>25.8%</span></div>
            </div>
            <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:"var(--accent)"}}/>Revenu</span>
              <span className="row" style={{gap:6}}><span style={{width:8,height:8,borderRadius:2,background:"oklch(0.85 0.18 248)"}}/>Profit</span>
            </div>
          </div>
          <div className="card-body">
            <Bars data={REVENUE_MONTHLY} />
          </div>
        </div>

        {/* Alerts */}
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Alertes du jour</div>
              <div className="card-sub">5 alertes · 2 critiques · 2 attention</div>
            </div>
            <button className="btn" data-variant="ghost" data-size="sm" style={{ marginLeft: "auto" }}>Tout voir</button>
          </div>
          <div style={{ padding: "4px 0" }}>
            {ALERTS.map((a) => (
              <div key={a.id} onClick={() => onNavigate(a.page)} style={{
                display: "flex", gap: 10, padding: "10px 14px", cursor: "pointer",
                borderBottom: "1px solid var(--border-subtle)"
              }}>
                <span style={{ width: 6, marginTop: 5, height: 6, borderRadius: 999, background: `var(--${a.tone})`, flexShrink: 0, boxShadow: `0 0 0 3px var(--${a.tone}-soft)` }}/>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 550, marginBottom: 2, overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap" }}>{a.title}</div>
                  <div style={{ fontSize: 11, color: "var(--text-dim)" }}>{a.sub}</div>
                </div>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--text-faint)", whiteSpace: "nowrap" }}>{a.time}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr", marginTop: 14 }}>
        {/* Top margins */}
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Top marges du jour</div>
              <div className="card-sub">Tri par marge nette %</div>
            </div>
          </div>
          <div style={{ padding: "4px 0" }}>
            {topMargins.map((p, i) => (
              <div key={p.id} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 10, alignItems: "center", padding: "9px 14px", borderBottom: i === topMargins.length-1 ? "none" : "1px solid var(--border-subtle)" }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)", width: 18 }}>{(i+1).toString().padStart(2,"0")}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.name}</div>
                  <div className="row" style={{ gap: 4, marginTop: 1, alignItems: "center" }}>
                    <Asin value={p.asin} size={10.5} />
                    <span className="mono" style={{ fontSize: 10.5, color: "var(--text-faint)" }}>· BSR {p.bsr.toLocaleString()}</span>
                  </div>
                </div>
                <div className="num" style={{ fontSize: 14, fontWeight: 600, color: "var(--green)" }}>{p.margin.toFixed(1)}%</div>
              </div>
            ))}
          </div>
        </div>

        {/* Velocity */}
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Velocité (7j)</div>
              <div className="card-sub">Unités vendues / jour</div>
            </div>
          </div>
          <div style={{ padding: 14 }}>
            {PRODUCTS.filter(p => p.vel > 0).sort((a,b)=>b.vel-a.vel).slice(0,5).map((p) => (
              <div key={p.id} style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 8, alignItems: "center", padding: "6px 0" }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.name}</div>
                  <div style={{ height: 4, background: "var(--bg-3)", borderRadius: 999, marginTop: 4, position: "relative", overflow: "hidden" }}>
                    <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${(p.vel/22)*100}%`, background: "linear-gradient(90deg, var(--accent), var(--accent-strong))", borderRadius: 999 }}/>
                  </div>
                </div>
                <div className="num" style={{ fontSize: 13, fontWeight: 600, minWidth: 32, textAlign: "right" }}>{p.vel}/j</div>
              </div>
            ))}
          </div>
        </div>

        {/* Tasks */}
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Tâches de l'équipe</div>
              <div className="card-sub">5 ouvertes · 2 en revue · 1 fait</div>
            </div>
            <button className="btn" data-variant="ghost" data-size="sm" style={{ marginLeft: "auto" }}><Icon name="plus" size={12} /></button>
          </div>
          <div style={{ padding: "0 14px" }}>
            {TASKS.slice(0, 5).map((t) => <TaskRow key={t.id} t={t} />)}
          </div>
        </div>
      </div>

      {/* Bottom row: shipments & quick split */}
      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head">
          <div>
            <div className="card-title">Expéditions FBA en cours</div>
            <div className="card-sub">4 envois actifs · 4,400 unités en transit</div>
          </div>
          <button className="btn" data-variant="ghost" data-size="sm" onClick={() => onNavigate("shipments")} style={{ marginLeft: "auto" }}>Voir tout <Icon name="chevronRight" size={12} /></button>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th style={{width:90}}>ID</th>
              <th>Origine</th>
              <th>Destination</th>
              <th style={{width:70, textAlign:"right"}}>Unités</th>
              <th style={{width:120}}>Transporteur</th>
              <th style={{width:120}}>Statut</th>
              <th style={{width:70}}>ETA</th>
            </tr>
          </thead>
          <tbody>
            {SHIPMENTS.map((s) => (
              <tr key={s.id}>
                <td><span className="mono" style={{ color: "var(--text)" }}>{s.id}</span></td>
                <td>{s.origin}</td>
                <td>{s.dest}</td>
                <td className="num" style={{ textAlign: "right" }}>{s.units.toLocaleString()}</td>
                <td className="muted">{s.carrier}</td>
                <td>
                  <Badge tone={s.status === "douanes" ? "amber" : s.status === "préparation" ? "muted" : "blue"} dot>
                    {s.status}
                  </Badge>
                </td>
                <td className="mono muted">{s.eta}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;