// Tempo app replica, faithful to the real interface (cadence/src/app/(app)):
// grouped sidebar nav with ochre active bar, sticky header with user block,
// Stock page with category tabs, zebra table, lot badges. Colors are the
// Tempo dark-theme tokens from cadence/src/app/globals.css (a product
// screenshot keeps its own theme, independent of the site's theme).
const CAD = {
  background: "#0e1116",
  surface: "#161a20",
  surface2: "#1d222a",
  zebra: "#1a1f26",
  sidebar: "#14181d",
  ink: "#e6e9ef",
  muted: "#98a1ad",
  faint: "#69727e",
  line: "#262c35",
  accent: "#e0913b",
  accentInk: "#eba85e",
  brand: "#e0913b",
  selected: "#e6e9ef",
  okSoft: "#16301f", okInk: "#7dd3a0", ok: "#4fb477",
  warnSoft: "#33290f", warnInk: "#e9c877", warnDot: "#e0b341",
};

const CAD_NAV = [
  { label: "Exploitation", links: [
    ["📊", "Tableau de bord"], ["📥", "Réception"], ["📦", "Stock", true], ["⚙️", "Façonnage"], ["🚚", "Expédition"],
  ]},
  { label: "Suivi", links: [["🧬", "Traçabilité"], ["🕓", "Historique"]] },
  { label: "Catalogue", links: [["🗂️", "Références"], ["🤝", "Partenaires"]] },
];

const CAD_TABS = [
  { label: "🌿 Matières premières" },
  { label: "🫙 Packaging" },
  { label: "🏷️ Produits finis", active: true },
];

const CAD_ROWS = [
  { lot: "LOT-2418-A", product: "Coffret découverte 30 ml", qty: "128/200 u", alloc: "alloué 24 · dispo 104 u", date: "12/07/2026", badge: { text: "Disponible", tone: "ok" } },
  { lot: "LOT-2411-C", product: "Eau de parfum 50 ml", qty: "342/400 u", date: "03/07/2026", badge: { text: "Disponible", tone: "ok" } },
  { lot: "LOT-2405-B", product: "Kit influenceur PR", qty: "36/120 u", date: "21/06/2026", badge: { text: "Disponible", tone: "ok" } },
  { lot: "LOT-2398-D", product: "Bougie parfumée 190 g", qty: "0/250 u", date: "09/06/2026", badge: { text: "Lot épuisé", tone: "neutral" }, empty: true },
];

const CadBadge = ({ text, tone }) => {
  const colors = {
    ok: { background: CAD.okSoft, color: CAD.okInk },
    warn: { background: CAD.warnSoft, color: CAD.warnInk },
    neutral: { background: CAD.surface2, color: CAD.muted },
  }[tone];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      borderRadius: 999, padding: "2px 8px", fontSize: 9.5, fontWeight: 500,
      whiteSpace: "nowrap", ...colors,
    }}>{text}</span>
  );
};

const Dashboard = ({ t }) => {
  const th = { padding: "6px 9px", fontWeight: 500, fontSize: 8.5, textTransform: "uppercase", letterSpacing: "0.06em", color: CAD.faint, textAlign: "left", whiteSpace: "nowrap" };
  const td = { padding: "6px 9px", fontSize: 10.5, verticalAlign: "top" };

  return (
    <div style={{
      position: "relative",
      borderRadius: 14,
      background: CAD.surface,
      border: "1px solid var(--line)",
      boxShadow: "0 30px 60px -30px rgba(20,20,30,0.18), 0 8px 24px -16px rgba(20,20,30,0.12)",
      overflow: "hidden",
      fontFamily: "Geist, system-ui, sans-serif",
    }}>
      {/* Window chrome */}
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        padding: "10px 14px", borderBottom: `1px solid ${CAD.line}`,
        background: CAD.surface2,
      }}>
        <div style={{display:"flex", gap:6}}>
          {["#ff5f57","#febc2e","#28c840"].map(c => (
            <span key={c} style={{ width: 10, height: 10, borderRadius: 999, background: c }}/>
          ))}
        </div>
        <div style={{
          marginLeft: 12, padding: "3px 10px", fontFamily: "Geist Mono",
          fontSize: 10, color: CAD.muted, background: CAD.surface,
          border: `1px solid ${CAD.line}`, borderRadius: 999, letterSpacing: "0.08em",
          display: "flex", alignItems: "center", gap: 6,
        }}>
          <TempoMark size={12} color={CAD.ink}/>
          tempo.shoptimize.fr
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "148px 1fr", minHeight: 400 }}>
        {/* Sidebar — grouped nav, ochre bar on the active item */}
        <aside style={{ background: CAD.sidebar, borderRight: `1px solid ${CAD.line}`, padding: "12px 8px 14px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 5, padding: "2px 6px 12px" }}>
            <TempoMark size={17} color={CAD.ink}/>
            <span style={{ fontFamily: "'Afacad', 'Geist', sans-serif", fontWeight: 600, fontSize: 14.5, letterSpacing: "-0.01em", color: CAD.ink }}>Tempo</span>
          </div>
          {CAD_NAV.map(g => (
            <div key={g.label} style={{ marginBottom: 12 }}>
              <div style={{ padding: "0 8px 4px", fontSize: 7.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.12em", color: CAD.faint }}>{g.label}</div>
              {g.links.map(([icon, label, active]) => (
                <div key={label} style={{
                  position: "relative", display: "flex", alignItems: "center", gap: 6,
                  borderRadius: 7, padding: "4px 8px 4px 11px", marginBottom: 1,
                  fontSize: 10, fontWeight: active ? 600 : 500,
                  background: active ? CAD.surface2 : "transparent",
                  color: active ? CAD.ink : CAD.muted,
                }}>
                  {active && <span style={{ position: "absolute", left: 0, top: 4, bottom: 4, width: 3, borderRadius: 999, background: CAD.accent }}/>}
                  <span style={{ width: 13, textAlign: "center", fontSize: 10 }}>{icon}</span>
                  {label}
                </div>
              ))}
            </div>
          ))}
        </aside>

        {/* Content column */}
        <div style={{ background: CAD.background, display: "flex", flexDirection: "column", minWidth: 0 }}>
          {/* App header — user block on the right, like the real chrome */}
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 8,
            padding: "6px 12px", borderBottom: `1px solid ${CAD.line}`,
            background: "rgba(14,17,22,0.6)",
          }}>
            <div style={{ textAlign: "right", lineHeight: 1.25 }}>
              <div style={{ fontSize: 9.5, fontWeight: 500, color: CAD.ink }}>Ma Boutique</div>
              <div style={{ fontSize: 8, color: CAD.muted }}>client</div>
            </div>
            <span style={{ width: 18, height: 18, borderRadius: 999, background: CAD.surface2, border: `1px solid ${CAD.line}`, display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 9 }}>👤</span>
          </div>

          {/* Stock page */}
          <div style={{ padding: "12px 14px 16px" }}>
            <div style={{ fontFamily: "'Afacad', 'Geist', sans-serif", fontSize: 15, fontWeight: 600, color: CAD.ink }}>📦 Stock</div>

            {/* Category tabs — active tab filled dark, like tabCls() */}
            <div style={{ display: "flex", gap: 5, marginTop: 10, flexWrap: "wrap" }}>
              {CAD_TABS.map(tab => (
                <span key={tab.label} style={{
                  borderRadius: 7, padding: "3px 8px", fontSize: 9.5, fontWeight: 500, whiteSpace: "nowrap",
                  border: `1px solid ${tab.active ? CAD.selected : CAD.line}`,
                  background: tab.active ? CAD.selected : "transparent",
                  color: tab.active ? CAD.surface : CAD.muted,
                }}>{tab.label}</span>
              ))}
            </div>

            {/* Lots table — rounded container, zebra rows, semantic badges */}
            <div style={{ marginTop: 10, borderRadius: 10, border: `1px solid ${CAD.line}`, background: CAD.surface, overflow: "hidden" }}>
              <table style={{ width: "100%", borderCollapse: "collapse" }}>
                <thead style={{ background: CAD.surface2 }}>
                  <tr>
                    <th style={th}>Lot</th>
                    <th style={th}>Produit</th>
                    <th style={{...th, textAlign: "right"}}>Quantité</th>
                    <th style={th}>État</th>
                  </tr>
                </thead>
                <tbody>
                  {CAD_ROWS.map((r, i) => (
                    <tr key={r.lot} style={{
                      borderTop: `1px solid ${CAD.line}`,
                      background: i % 2 ? CAD.zebra : CAD.surface,
                      color: r.empty ? CAD.faint : CAD.ink,
                    }}>
                      <td style={{...td, fontFamily: "Geist Mono", fontSize: 9, textDecoration: "underline", textUnderlineOffset: 2, whiteSpace: "nowrap" }}>{r.lot}</td>
                      <td style={td}>{r.product}</td>
                      <td style={{...td, textAlign: "right", fontWeight: 500, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>
                        {r.qty}
                        {r.alloc && <div style={{ fontSize: 8.5, fontWeight: 400, color: CAD.accentInk }}>{r.alloc}</div>}
                      </td>
                      <td style={td}><CadBadge {...r.badge}/></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
window.Dashboard = Dashboard;