// Skeletal full-app file with 4 bottom tabs — English, USD only

const { motion: ma } = window;
const Da = () => window.SOKO_DATA;

function AppShell() {
  const [tab, setTab] = React.useState("sourcing");
  const [view, setView] = React.useState({ kind: "list" });

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "#fafaf9" }}>
      <div style={{
        padding: "10px 18px 8px", borderBottom: "1px solid #f5f5f4",
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <window.SokoWordmark size={20} />
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <window.LangToggle value="EN" />
          <window.CurrencyToggle value="USD" />
          <div style={{
            width: 26, height: 26, borderRadius: 13,
            background: "linear-gradient(135deg, oklch(0.78 0.10 10), oklch(0.55 0.10 15))",
            color: "#fafaf9", display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 10, fontWeight: 600,
          }}>MG</div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: "auto" }}>
        {tab === "sourcing" && (view.kind === "product" ? <ProductDetailPage id={view.id} onBack={() => setView({ kind: "list" })} /> : <SourcingTab onOpenProduct={(id) => setView({ kind: "product", id })} />)}
        {tab === "logistics" && <LogisticsTab />}
        {tab === "orders" && <OrdersTab />}
        {tab === "insights" && <InsightsTab />}
      </div>

      <div style={{
        display: "flex", borderTop: "1px solid #f5f5f4",
        padding: "8px 0 18px", background: "#fff",
      }}>
        {[
          { id: "sourcing", label: "Sourcing", icon: <PathIcon d="M3 7h18M3 12h18M3 17h12" /> },
          { id: "logistics", label: "Logistics", icon: <PathIcon d="M2 16h20M2 16l3-9h14l3 9M6 16v3M18 16v3" /> },
          { id: "orders", label: "Orders", icon: <PathIcon d="M5 4h14l-1 16H6L5 4zM9 8h6" /> },
          { id: "insights", label: "Insights", icon: <PathIcon d="M3 21V8M9 21V3M15 21v-9M21 21V13" /> },
        ].map(t => (
          <button key={t.id} onClick={() => { setTab(t.id); setView({ kind: "list" }); }} style={{
            flex: 1, border: "none", background: "none", cursor: "pointer",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 3,
            color: tab === t.id ? "oklch(0.55 0.16 40)" : "#a8a29e",
            fontFamily: "inherit",
          }}>
            {t.icon}
            <span style={{ fontSize: 10, fontWeight: tab === t.id ? 600 : 400, fontFamily: "ui-monospace, monospace", letterSpacing: 0.3 }}>{t.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function PathIcon({ d }) {
  return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>;
}

// ====== TAB 1: Sourcing ======
function SourcingTab({ onOpenProduct }) {
  const items = Da().products;
  return (
    <div style={{ padding: "12px 14px" }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        padding: "8px 12px", background: "#f5f5f4", borderRadius: 8, marginBottom: 12,
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" strokeWidth="2"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" strokeLinecap="round" /></svg>
        <input placeholder="Search products…" style={{ flex: 1, border: "none", background: "transparent", fontSize: 13, outline: "none", fontFamily: "inherit" }} />
      </div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12, overflowX: "auto", paddingBottom: 4 }}>
        {["Activewear", "Accessories", "Footwear", "Outerwear"].map((c, i) => (
          <window.Chip key={c} tone={i === 0 ? "primary" : "neutral"}>{c}</window.Chip>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {items.map(p => (
          <button key={p.id} onClick={() => onOpenProduct(p.id)} style={{
            background: "#fff", border: "1px solid #f5f5f4", borderRadius: 10,
            overflow: "hidden", textAlign: "left", padding: 0, cursor: "pointer",
            fontFamily: "inherit",
          }}>
            <window.ProductPlaceholder product={p} height={100} />
            <div style={{ padding: 8 }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: "#1c1917", lineHeight: 1.3, minHeight: 28, overflow: "hidden" }}>{p.en}</div>
              <div style={{ marginTop: 6, fontSize: 11, fontWeight: 600, color: "oklch(0.42 0.16 40)", fontFamily: "ui-monospace, monospace" }}>
                ${p.tiers[0].usd.toFixed(2)}–${p.tiers[p.tiers.length - 1].usd.toFixed(2)} <span style={{ color: "#a8a29e", fontWeight: 400, fontSize: 9 }}>· MOQ {p.moq}</span>
              </div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

function ProductDetailPage({ id, onBack }) {
  const p = Da().products.find(x => x.id === id);
  const sup = Da().suppliers.find(s => s.id === p.supplierId);
  return (
    <div>
      <button onClick={onBack} style={{
        background: "none", border: "none", padding: "10px 14px", color: "#78716c", fontSize: 12, cursor: "pointer", fontFamily: "ui-monospace, monospace",
      }}>← back</button>
      <window.ProductPlaceholder product={p} height={160} />
      <div style={{ padding: "12px 18px" }}>
        <window.BilingualTitle en={p.en} size={16} />
        <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 4, fontFamily: "ui-monospace, monospace" }}>
          {p.tiers.map(t => (
            <div key={t.qty} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid #f5f5f4", fontSize: 12 }}>
              <span style={{ color: "#78716c" }}>{t.qty} u</span>
              <span style={{ color: "#1c1917", fontWeight: 600 }}>${t.usd.toFixed(2)}/u</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, padding: 10, background: "#fff", border: "1px solid #f5f5f4", borderRadius: 8 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "#1c1917" }}>{sup.name}</div>
          <div style={{ fontSize: 9, color: "#78716c", fontFamily: "ui-monospace, monospace", marginTop: 2 }}>{sup.province} · {sup.years} years · {sup.response}% resp</div>
          <div style={{ marginTop: 6 }}><window.TrustPassBadge kind={sup.badge.includes("Audit") ? "Audit" : "TrustPass"} /></div>
        </div>
        <button style={{
          marginTop: 14, width: "100%", padding: "12px 0", border: "none",
          background: "oklch(0.55 0.16 40)", color: "#fafaf9", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer",
        }}>Add to cart</button>
      </div>
    </div>
  );
}

// ====== TAB 2: Logistics ======
function LogisticsTab() {
  const fwds = Da().forwarders;
  const pls = Da().threePls;
  const [sub, setSub] = React.useState("forwarders");
  return (
    <div style={{ padding: "12px 14px" }}>
      <div style={{ display: "flex", gap: 0, marginBottom: 14, borderBottom: "1px solid #f5f5f4" }}>
        {[["forwarders", "Forwarders (CN)"], ["3pls", "3PL (MX)"]].map(([k, l]) => (
          <button key={k} onClick={() => setSub(k)} style={{
            padding: "8px 12px", border: "none", background: "none", cursor: "pointer",
            color: sub === k ? "#1c1917" : "#a8a29e", fontWeight: sub === k ? 600 : 400,
            borderBottom: sub === k ? "2px solid oklch(0.55 0.16 40)" : "2px solid transparent",
            marginBottom: -1, fontSize: 12, fontFamily: "inherit",
          }}>{l}</button>
        ))}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {sub === "forwarders" && fwds.map(f => (
          <div key={f.id} style={{
            background: "#fff", border: f.recommended ? "1.5px solid oklch(0.55 0.16 40)" : "1px solid #f5f5f4",
            borderRadius: 10, padding: 12,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600, color: "#1c1917" }}>{f.name}</div>
                <div style={{ marginTop: 4, fontSize: 10, color: "#78716c", fontFamily: "ui-monospace, monospace" }}>{f.city} · {f.modes.join("/")}</div>
              </div>
              <div style={{ textAlign: "right", fontFamily: "ui-monospace, monospace" }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{f.sentiment}<span style={{ fontSize: 9, color: "#78716c", fontWeight: 400 }}>/100</span></div>
                <div style={{ fontSize: 9, color: "#78716c" }}>★ {f.founderRating}</div>
              </div>
            </div>
            <div style={{ marginTop: 8 }}><window.VettedBadge date={f.vettedAt} /></div>
          </div>
        ))}
        {sub === "3pls" && pls.map(p => (
          <div key={p.id} style={{
            background: "#fff", border: p.recommended ? "1.5px solid oklch(0.55 0.16 40)" : "1px solid #f5f5f4",
            borderRadius: 10, padding: 12,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600, color: "#1c1917" }}>{p.name}</div>
                <div style={{ fontSize: 10, color: "#78716c", fontFamily: "ui-monospace, monospace", marginTop: 2 }}>{p.city} · {p.capacity.toLocaleString()} u/mo</div>
              </div>
              <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 11 }}>★ {p.rating}</div>
            </div>
            <div style={{ marginTop: 8, display: "flex", gap: 5, flexWrap: "wrap" }}>
              {p.services.map(s => <window.Chip key={s} tone="teal">{s}</window.Chip>)}
            </div>
            <div style={{ marginTop: 8 }}><window.VettedBadge date={p.vettedAt} /></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ====== TAB 3: Orders ======
function OrdersTab() {
  const orders = [
    { id: "SK-2026-0142", status: "active", supplier: "3 suppliers", amount: "$1,082 USD", stage: "MX Customs" },
    { id: "SK-2026-0118", status: "delivered", supplier: "Hangzhou Beifa", amount: "$642 USD", stage: "Delivered · Feb 28" },
    { id: "SK-2026-0094", status: "delivered", supplier: "Yiwu Senlin", amount: "$2,140 USD", stage: "Delivered · Feb 11" },
  ];
  return (
    <div style={{ padding: "14px" }}>
      <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 12, color: "#1c1917" }}>Your orders</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {orders.map(o => (
          <div key={o.id} style={{
            background: "#fff", border: "1px solid #f5f5f4", borderRadius: 10, padding: 12,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div style={{ fontSize: 11, fontFamily: "ui-monospace, monospace", color: "#78716c" }}>{o.id}</div>
              <window.Chip tone={o.status === "active" ? "primary" : "teal"}>{o.status === "active" ? "IN PROGRESS" : "DELIVERED"}</window.Chip>
            </div>
            <div style={{ marginTop: 6, fontSize: 13, fontWeight: 600, color: "#1c1917" }}>{o.supplier}</div>
            <div style={{ marginTop: 4, display: "flex", justifyContent: "space-between", fontSize: 11, color: "#78716c", fontFamily: "ui-monospace, monospace" }}>
              <span>{o.stage}</span>
              <span style={{ color: "#1c1917", fontWeight: 600 }}>{o.amount}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ====== TAB 4: Insights ======
function InsightsTab() {
  return (
    <div style={{ padding: "14px" }}>
      <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 12, color: "#1c1917" }}>P&L · Q1 2026</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 14 }}>
        {[
          ["Revenue", "$3,840"], ["COGS", "$1,910"],
          ["Net margin", "$842"], ["ROI 90d", "+18%"],
        ].map(([l, v]) => (
          <div key={l} style={{ background: "#fff", border: "1px solid #f5f5f4", borderRadius: 8, padding: 10 }}>
            <div style={{ fontSize: 9, color: "#78716c", fontFamily: "ui-monospace, monospace", letterSpacing: 0.5, textTransform: "uppercase" }}>{l}</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: "#1c1917", marginTop: 2, fontFamily: "ui-monospace, monospace" }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ background: "#fff", border: "1px solid #f5f5f4", borderRadius: 10, padding: 12, marginBottom: 14 }}>
        <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 10 }}>Margin per SKU</div>
        {[["3-piece set", 41], ["Yoga leggings", 36], ["Sports bra", 33], ["Mesh tee", 29]].map(([l, v]) => (
          <div key={l} style={{ marginBottom: 8 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, fontFamily: "ui-monospace, monospace", marginBottom: 3 }}>
              <span style={{ color: "#57534e" }}>{l}</span>
              <span style={{ fontWeight: 600 }}>{v}%</span>
            </div>
            <div style={{ height: 6, background: "#f5f5f4", borderRadius: 3, overflow: "hidden" }}>
              <div style={{ width: `${v * 2}%`, height: "100%", background: "oklch(0.55 0.16 40)" }} />
            </div>
          </div>
        ))}
      </div>
      <div style={{
        background: "linear-gradient(180deg, oklch(0.97 0.03 50), oklch(0.94 0.04 50))",
        border: "1px solid oklch(0.88 0.06 50)", borderRadius: 10, padding: 12,
        display: "flex", gap: 10, alignItems: "center",
      }}>
        <window.SokoMark size={24} pulsing />
        <div style={{ flex: 1, fontSize: 11, lineHeight: 1.4, color: "#1c1917" }}>
          <b>soko suggests:</b> reorder the 3-piece set in 32 days. Demand on MELI up 12%.
        </div>
      </div>
    </div>
  );
}

window.AppShell = AppShell;