/* OrchEcomm UI kit — data tables: Orders (expandable), Products, Sync Log. */

const _th = { textAlign: "left", font: "var(--type-eyebrow)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-secondary)", padding: "9px 12px", fontWeight: 600, whiteSpace: "nowrap" };
const _td = { padding: "12px", font: "var(--type-body)", color: "var(--text-primary)", borderTop: "1px solid var(--border-subtle)", verticalAlign: "middle" };

function PlatformTag({ store }) {
  const I = window.OcIcons;
  const map = { WooCommerce: { ic: "Store", c: "var(--green-700)" }, Shopify: { ic: "Bag", c: "var(--green-700)" }, Both: { ic: "Puzzle", c: "var(--green-700)" }, Stripe: { ic: "Card", c: "var(--green-700)" }, "Visual Content": { ic: "Image", c: "var(--green-700)" } };
  const m = map[store] || map.WooCommerce;
  const Icon = I[m.ic];
  return <span style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--text-secondary)", fontSize: "var(--text-sm)" }}>
    <span style={{ color: m.c, display: "inline-flex" }}><Icon size={15} /></span>{store}
  </span>;
}

function OrdersTable({ rows, expandable = true }) {
  const I = window.OcIcons;
  const { Badge } = window.OrchEcommDesignSystem_091be6;
  const T = window.OcData.orderStatusTone;
  const [open, setOpen] = React.useState(null);
  return (
    <div style={{ overflowX: "auto", margin: "0 -4px" }}>
      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        <thead><tr>
          {expandable ? <th style={{ ..._th, width: 28 }}></th> : null}
          <th style={_th}>Order</th><th style={_th}>Platform</th><th style={_th}>Customer</th>
          <th style={{ ..._th, textAlign: "center" }}>Items</th><th style={{ ..._th, textAlign: "right" }}>Total</th>
          <th style={_th}>Status</th><th style={{ ..._th, textAlign: "right" }}>Date</th>
        </tr></thead>
        <tbody>
          {rows.map((r, i) => {
            const isOpen = open === r.id;
            return <React.Fragment key={r.id}>
              <tr onClick={() => expandable && setOpen(isOpen ? null : r.id)}
                style={{ background: isOpen ? "var(--green-50)" : i % 2 ? "var(--surface-zebra)" : "transparent", cursor: expandable ? "pointer" : "default", transition: "background var(--transition-fast)" }}>
                {expandable ? <td style={{ ..._td, color: "var(--text-muted)" }}><span style={{ display: "inline-flex", transform: isOpen ? "rotate(90deg)" : "none", transition: "transform var(--transition-fast)" }}><I.ChevronRight size={15} /></span></td> : null}
                <td style={{ ..._td, fontFamily: "var(--font-mono)", fontWeight: 500 }}>{r.id}</td>
                <td style={_td}><PlatformTag store={r.store} /></td>
                <td style={{ ..._td, fontWeight: 500 }}>{r.customer}</td>
                <td style={{ ..._td, textAlign: "center", color: "var(--text-secondary)" }}>{r.items}</td>
                <td style={{ ..._td, textAlign: "right", fontWeight: 600 }}>{r.total}</td>
                <td style={_td}><Badge tone={T[r.status]} dot>{r.status[0].toUpperCase() + r.status.slice(1)}</Badge></td>
                <td style={{ ..._td, textAlign: "right", color: "var(--text-muted)", fontSize: "var(--text-xs)" }}>{r.date}</td>
              </tr>
              {isOpen ? <tr><td colSpan={8} style={{ padding: 0, background: "var(--green-50)" }}>
                <div style={{ padding: "4px 16px 16px 52px" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
                    <span style={{ font: "var(--type-eyebrow)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-secondary)" }}>Line items</span>
                    <a href="#" onClick={(e) => e.preventDefault()} style={{ font: "var(--type-body)", color: "var(--text-link)", fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 4 }}>View on {r.store} <I.ArrowUpRight size={14} /></a>
                  </div>
                  <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", overflow: "hidden" }}>
                    {r.lines.map((ln, j) => (
                      <div key={j} style={{ display: "flex", alignItems: "center", gap: 12, padding: "9px 12px", borderTop: j ? "1px solid var(--border-subtle)" : "none" }}>
                        <span style={{ flex: 1, font: "var(--type-body)", color: "var(--text-primary)" }}>{ln[0]}</span>
                        <span style={{ font: "var(--type-caption)", color: "var(--text-secondary)" }}>Qty {ln[1]}</span>
                        <span style={{ font: "var(--type-body)", fontWeight: 600, width: 70, textAlign: "right" }}>{ln[2]}</span>
                      </div>
                    ))}
                  </div>
                  <div style={{ display: "flex", gap: 18, marginTop: 8, font: "var(--type-caption)", color: "var(--text-secondary)" }}>
                    <span>{r.email}</span>
                  </div>
                </div>
              </td></tr> : null}
            </React.Fragment>;
          })}
        </tbody>
      </table>
    </div>
  );
}

function ProductsTable({ rows, onFixVisual }) {
  const I = window.OcIcons;
  const stockTone = { "In stock": "var(--color-success)", "Low stock": "var(--color-warning)", "Out of stock": "var(--color-error)" };
  return (
    <div style={{ overflowX: "auto", margin: "0 -4px" }}>
      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        <thead><tr>
          <th style={_th}>Product</th><th style={_th}>Platform</th><th style={_th}>SKU</th>
          <th style={{ ..._th, textAlign: "right" }}>Price</th><th style={_th}>Stock</th><th style={{ ..._th, textAlign: "right" }}>Last synced</th>
        </tr></thead>
        <tbody>
          {rows.map((p, i) => (
            <tr key={p.sku} style={{ background: i % 2 ? "var(--surface-zebra)" : "transparent" }}>
              <td style={{ ..._td, fontWeight: 500 }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                  {p.name}
                  {p.missingVisual ? <span title="Missing visual — click to generate" onClick={() => onFixVisual && onFixVisual(p)} style={{ display: "inline-flex", alignItems: "center", gap: 4, cursor: "pointer", color: "var(--color-warning)", background: "var(--color-warning-bg)", borderRadius: "var(--radius-full)", padding: "2px 8px", fontSize: 11, fontWeight: 600 }}><I.Image size={12} /> No visual</span> : null}
                </span>
              </td>
              <td style={_td}><PlatformTag store={p.store} /></td>
              <td style={{ ..._td, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-secondary)" }}>{p.sku}</td>
              <td style={{ ..._td, textAlign: "right", fontWeight: 600 }}>{p.price}</td>
              <td style={_td}><span style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--text-primary)", fontSize: "var(--text-sm)" }}><span style={{ width: 8, height: 8, borderRadius: "50%", background: stockTone[p.stock] }} />{p.stock}{p.qty ? <span style={{ color: "var(--text-muted)" }}>· {p.qty}</span> : null}</span></td>
              <td style={{ ..._td, textAlign: "right", color: "var(--text-muted)", fontSize: "var(--text-xs)" }}>{p.synced}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function SyncLogTable({ rows }) {
  const { Badge } = window.OrchEcommDesignSystem_091be6;
  const T = window.OcData.syncStatusTone;
  return (
    <div style={{ overflowX: "auto", margin: "0 -4px" }}>
      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        <thead><tr>
          <th style={_th}>Time</th><th style={_th}>Platform</th><th style={_th}>Event</th>
          <th style={{ ..._th, textAlign: "center" }}>Items</th><th style={_th}>Status</th><th style={{ ..._th, textAlign: "right" }}>Duration</th>
        </tr></thead>
        <tbody>
          {rows.map((s, i) => (
            <tr key={i} style={{ background: i % 2 ? "var(--surface-zebra)" : "transparent" }}>
              <td style={{ ..._td, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-secondary)" }}>{s.time}</td>
              <td style={_td}><PlatformTag store={s.platform} /></td>
              <td style={{ ..._td, color: "var(--text-primary)" }}>{s.event}</td>
              <td style={{ ..._td, textAlign: "center", color: "var(--text-secondary)" }}>{s.items || "—"}</td>
              <td style={_td}><Badge tone={T[s.status]} dot>{s.status[0].toUpperCase() + s.status.slice(1)}</Badge></td>
              <td style={{ ..._td, textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{s.duration}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

window.OrdersTable = OrdersTable;
window.ProductsTable = ProductsTable;
window.SyncLogTable = SyncLogTable;
window.PlatformTag = PlatformTag;