/* OrchEcomm — Orders, Products, Sync Log, Integrations, Module detail screens. */

function StatTiles({ tiles }) {
  const { Card } = window.OrchEcommDesignSystem_091be6;
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${tiles.length},1fr)`, gap: "var(--gap-grid)" }}>
      {tiles.map(([l, v, sub], i) => (
        <Card key={i} padding="md">
          <div style={{ font: "var(--type-eyebrow)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-secondary)" }}>{l}</div>
          <div style={{ font: "var(--type-metric)", color: "var(--text-primary)", marginTop: 6 }}>{v}</div>
          {sub ? <div style={{ font: "var(--type-caption)", color: "var(--text-muted)", marginTop: 2 }}>{sub}</div> : null}
        </Card>
      ))}
    </div>
  );
}

function FilterBar({ groups }) {
  const I = window.OcIcons;
  const [active, setActive] = React.useState(groups.map((g) => g[0]));
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
      {groups.map((opts, gi) => (
        <div key={gi} style={{ display: "flex", gap: 6 }}>
          {opts.map((o) => {
            const on = active[gi] === o;
            return <button key={o} onClick={() => setActive((a) => a.map((x, i) => i === gi ? o : x))}
              style={{ height: 30, padding: "0 12px", borderRadius: "var(--radius-full)", border: "1px solid " + (on ? "var(--green-700)" : "var(--border-default)"), background: on ? "var(--green-100)" : "var(--surface-card)", color: on ? "var(--green-800)" : "var(--text-secondary)", font: "var(--type-body)", fontWeight: on ? 600 : 500, cursor: "pointer" }}>{o}</button>;
          })}
          {gi < groups.length - 1 ? <span style={{ width: 1, background: "var(--border-default)", margin: "4px 4px" }} /> : null}
        </div>
      ))}
    </div>
  );
}

function OrdersScreen() {
  const I = window.OcIcons;
  const { Card, CardHeader, Button } = window.OrchEcommDesignSystem_091be6;
  const orders = window.OcData.recentOrders;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
      <StatTiles tiles={[["All orders", "1,412", "this month"], ["Awaiting", "8", "needs fulfilment"], ["Fulfilled", "1,389"], ["Refunded", "15", "$842 total"]]} />
      <Card padding="lg">
        <CardHeader title="All orders" subtitle="Click a row to expand line items" action={<div style={{ display: "flex", gap: 8 }}>
          <Button variant="secondary" size="sm" iconLeft={<I.Filter size={14} />}>Filter</Button>
          <Button variant="secondary" size="sm" iconLeft={<I.Download size={14} />}>Export</Button>
        </div>} />
        <div style={{ marginBottom: 12 }}><FilterBar groups={[["All platforms", "WooCommerce", "Shopify"], ["All status", "Paid", "Pending", "Refunded"]]} /></div>
        {React.createElement(window.OrdersTable, { rows: orders, expandable: true })}
        <Pagination page={1} total={118} />
      </Card>
    </div>
  );
}
window.OrdersScreen = OrdersScreen;

function ProductsScreen({ onNavigate }) {
  const I = window.OcIcons;
  const { Card, CardHeader, Button, Input } = window.OrchEcommDesignSystem_091be6;
  const products = window.OcData.products;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
      <StatTiles tiles={[["Total products", "312"], ["In stock", "289"], ["Low / out", "14", "needs restock"], ["Missing visuals", "2", "auto-generate"]]} />
      <Card padding="lg">
        <CardHeader title="Products" subtitle="Synced from connected platforms" action={
          <div style={{ width: 220 }}><Input iconLeft={<I.Search size={15} />} placeholder="Search products…" size="sm" /></div>
        } />
        {React.createElement(window.ProductsTable, { rows: products, onFixVisual: () => onNavigate("visual") })}
        <Pagination page={1} total={32} />
      </Card>
    </div>
  );
}
window.ProductsScreen = ProductsScreen;

function SyncLogScreen() {
  const I = window.OcIcons;
  const { Card, CardHeader, Button } = window.OrchEcommDesignSystem_091be6;
  const log = window.OcData.syncLog;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
      <StatTiles tiles={[["Syncs today", "184"], ["Success rate", "98.6%", "last 24h"], ["Failed", "1", "auto-retried"], ["Avg duration", "3.4s"]]} />
      <Card padding="lg">
        <CardHeader title="Sync log" subtitle="All synchronization events across platforms" action={<Button variant="secondary" size="sm" iconLeft={<I.Refresh size={14} />}>Sync now</Button>} />
        <div style={{ marginBottom: 12 }}><FilterBar groups={[["All platforms", "WooCommerce", "Shopify", "Stripe"], ["All status", "Success", "Partial", "Failed"]]} /></div>
        {React.createElement(window.SyncLogTable, { rows: log })}
      </Card>
    </div>
  );
}
window.SyncLogScreen = SyncLogScreen;

function Pagination({ page, total }) {
  const I = window.OcIcons;
  const btn = (label, dim) => <button disabled={dim} style={{ height: 30, minWidth: 30, padding: "0 8px", border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", background: "var(--surface-card)", color: dim ? "var(--text-muted)" : "var(--text-secondary)", cursor: dim ? "default" : "pointer", font: "var(--type-body)" }}>{label}</button>;
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 14, paddingTop: 12, borderTop: "1px solid var(--border-subtle)" }}>
      <span style={{ font: "var(--type-caption)", color: "var(--text-secondary)" }}>Page {page} of {total}</span>
      <div style={{ display: "flex", gap: 6 }}>
        {btn("Previous", true)}
        <button style={{ height: 30, minWidth: 30, border: "1px solid var(--green-700)", borderRadius: "var(--radius-sm)", background: "var(--green-800)", color: "#fff", fontWeight: 600, cursor: "pointer" }}>1</button>
        {btn("2")}{btn("3")}
        <span style={{ alignSelf: "center", color: "var(--text-muted)", padding: "0 4px" }}>…</span>
        {btn(String(total))}{btn("Next")}
      </div>
    </div>
  );
}

function ConnectionCard({ m, onToggle, onDisconnect, onToast }) {
  const I = window.OcIcons;
  const { Card, Button, Badge, StatusDot } = window.OrchEcommDesignSystem_091be6;
  const Icon = I[m.icon];
  const state = !m.active ? "disconnected" : m.warning ? "reauth" : "connected";
  const stateInfo = { connected: ["Connected", "success"], reauth: ["Needs reauthorization", "warning"], disconnected: ["Disconnected", "neutral"] }[state];
  return (
    <Card padding="lg" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
        <span style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: m.active ? "var(--green-100)" : "var(--ink-100)", color: m.active ? "var(--green-700)" : "var(--text-muted)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon size={22} /></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ font: "var(--type-card-title)", color: "var(--text-primary)" }}>{m.name}</div>
          <div style={{ marginTop: 4 }}><Badge tone={stateInfo[1]} dot>{stateInfo[0]}</Badge></div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 22, padding: "10px 0", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
        {m.stats.map(([l, v], i) => (
          <div key={i}><div style={{ font: "var(--type-caption)", color: "var(--text-secondary)" }}>{l}</div><div style={{ font: "var(--type-card-title)", color: "var(--text-primary)", marginTop: 2 }}>{v}</div></div>
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>Last sync · {m.synced}</span>
        {state === "connected" ? <Button variant="ghost" size="sm" onClick={() => onDisconnect(m)}>Disconnect</Button>
          : state === "reauth" ? <Button variant="secondary" size="sm" iconLeft={<I.Refresh size={14} />} onClick={() => onToast("Reauthorized " + m.name)}>Reconnect</Button>
          : <Button variant="primary" size="sm" onClick={() => onToggle(m.id)}>Connect</Button>}
      </div>
    </Card>
  );
}

function IntegrationsScreen({ modules, onToggleModule, onDisconnect, onToast }) {
  const I = window.OcIcons;
  const { Card, CardHeader } = window.OrchEcommDesignSystem_091be6;
  const platforms = modules.filter((m) => ["stripe", "woo", "shopify"].includes(m.id));
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
      <SyncStatusPanel onToast={onToast} />
      <div>
        <div style={{ font: "var(--type-section)", color: "var(--text-primary)", margin: "4px 0 12px" }}>Platform connections</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--gap-grid)" }}>
          {platforms.map((m) => <ConnectionCard key={m.id} m={m} onToggle={onToggleModule} onDisconnect={onDisconnect} onToast={onToast} />)}
        </div>
      </div>
    </div>
  );
}
window.IntegrationsScreen = IntegrationsScreen;

function SyncStatusPanel({ onToast }) {
  const I = window.OcIcons;
  const { Card, Button, StatusDot } = window.OrchEcommDesignSystem_091be6;
  const [syncing, setSyncing] = React.useState(false);
  const run = () => { setSyncing(true); setTimeout(() => { setSyncing(false); onToast("All platforms synced"); }, 1800); };
  return (
    <Card padding="lg" style={{ display: "flex", alignItems: "center", gap: 18 }}>
      <span style={{ width: 46, height: 46, borderRadius: "var(--radius-md)", background: syncing ? "var(--green-100)" : "var(--green-100)", color: "var(--green-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <span style={{ display: "inline-flex", animation: syncing ? "ocd-spin 1s linear infinite" : "none" }}><I.Refresh size={22} /></span>
      </span>
      <div style={{ flex: 1 }}>
        <div style={{ font: "var(--type-card-title)", color: "var(--text-primary)" }}>{syncing ? "Syncing all platforms…" : "All platforms in sync"}</div>
        <div style={{ font: "var(--type-caption)", color: "var(--text-secondary)", marginTop: 3 }}>{syncing ? "Pulling latest orders, products and inventory" : "Last full sync 2 minutes ago · syncs every 15 minutes"}</div>
        {syncing ? <div style={{ height: 5, background: "var(--ink-100)", borderRadius: "var(--radius-full)", marginTop: 10, overflow: "hidden" }}><div style={{ height: "100%", width: "60%", background: "var(--green-600)", borderRadius: "var(--radius-full)", animation: "ocd-prog 1.8s var(--ease-out)" }} /></div> : null}
      </div>
      <Button variant="secondary" size="sm" iconLeft={<I.Refresh size={14} />} onClick={run} disabled={syncing}>Sync now</Button>
      <style>{`@keyframes ocd-spin{to{transform:rotate(360deg)}}@keyframes ocd-prog{from{width:5%}to{width:90%}}`}</style>
    </Card>
  );
}

function ModuleDetailScreen({ moduleId, modules, onToggleModule, onToast, onNavigate }) {
  const I = window.OcIcons;
  const { Card, CardHeader, Button, Switch, Badge, StatusDot } = window.OrchEcommDesignSystem_091be6;
  const m = modules.find((x) => x.id === moduleId) || modules[0];
  const Icon = I[m.icon];
  const status = m.active ? (m.warning ? "warning" : "active") : "inactive";
  const log = window.OcData.syncLog.filter((s) => s.platform.toLowerCase().includes(m.name.split(" ")[0].toLowerCase())).slice(0, 5);
  const shownLog = log.length ? log : window.OcData.syncLog.slice(0, 4);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
      <a href="#" onClick={(e) => { e.preventDefault(); onNavigate("modules"); }} style={{ display: "inline-flex", alignItems: "center", gap: 4, font: "var(--type-body)", color: "var(--text-secondary)", fontWeight: 500 }}><span style={{ transform: "rotate(180deg)", display: "inline-flex" }}><I.ChevronRight size={15} /></span> All modules</a>
      <Card padding="lg">
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: m.active ? "var(--green-100)" : "var(--ink-100)", color: m.active ? "var(--green-700)" : "var(--text-muted)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon size={26} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <h2 style={{ font: "var(--type-section)", color: "var(--text-primary)" }}>{m.name}</h2>
              {m.tag ? <Badge tone="brand">{m.tag}</Badge> : null}
            </div>
            <p style={{ font: "var(--type-body)", color: "var(--text-secondary)", marginTop: 3 }}>{m.desc}</p>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <StatusDot status={status} withLabel pulse={status === "active"} label={m.active ? (m.warning ? "Needs review" : "Active") : "Inactive"} />
            <Switch checked={m.active} onChange={() => onToggleModule(m.id)} />
          </div>
        </div>
      </Card>

      {m.warning && m.issue ? (
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 18px", borderRadius: "var(--radius-md)", background: "var(--color-warning-bg)", border: "1px solid var(--color-warning)" }}>
          <I.Bell size={18} style={{ color: "var(--color-warning)" }} />
          <span style={{ flex: 1, font: "var(--type-body)", color: "var(--color-warning-fg)", fontWeight: 500 }}>{m.issue}</span>
          <Button variant="secondary" size="sm" onClick={() => onToast("Reauthorized " + m.name)} style={{ borderColor: "var(--color-warning)", color: "var(--color-warning-fg)" }}>Resolve now</Button>
        </div>
      ) : null}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 300px", gap: "var(--gap-grid)", alignItems: "start" }}>
        <Card padding="lg">
          <CardHeader title="Recent events" subtitle={`Triggered by or related to ${m.name}`} />
          {React.createElement(window.SyncLogTable, { rows: shownLog })}
        </Card>
        <Card padding="lg">
          <CardHeader title="Settings" />
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {m.stats.map(([l, v], i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingBottom: 10, borderBottom: i < m.stats.length - 1 ? "1px solid var(--border-subtle)" : "none" }}>
                <span style={{ font: "var(--type-body)", color: "var(--text-secondary)" }}>{l}</span>
                <span style={{ font: "var(--type-card-title)", color: "var(--text-primary)" }}>{v}</span>
              </div>
            ))}
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ font: "var(--type-body)", color: "var(--text-secondary)" }}>Sync frequency</span>
              <span style={{ font: "var(--type-card-title)", color: "var(--text-primary)" }}>{m.freq}</span>
            </div>
            <Button variant="secondary" size="sm" fullWidth iconLeft={<I.Settings size={14} />}>Configure module</Button>
          </div>
        </Card>
      </div>
    </div>
  );
}
window.ModuleDetailScreen = ModuleDetailScreen;