/* OrchEcomm — Visual Content System (flagship): generated assets, queue, brand kit, preview modal. */
function VisualContentScreen({ onToast }) {
  const I = window.OcIcons;
  const { Card, CardHeader, Badge, Button } = window.OrchEcommDesignSystem_091be6;
  const [fmt, setFmt] = React.useState("All");
  const [preview, setPreview] = React.useState(null);
  const formats = ["All", "Storefront", "Social", "Email"];

  const assets = [
    { name: "Aurora Hydrating Serum", price: "$38.00", was: "$48.00", sale: true, fmt: "Storefront", swatch: ["#2D6A4F", "#52B788"], updated: "4m ago", trigger: "Sale activated" },
    { name: "Evergreen Tote — Olive", price: "$64.00", sale: false, fmt: "Social", swatch: ["#1B4332", "#40916C"], updated: "1h ago", trigger: "New product" },
    { name: "Cold Brew Concentrate", price: "$22.00", was: "$26.00", sale: true, fmt: "Email", swatch: ["#40916C", "#74C69D"], updated: "1h ago", trigger: "Price change" },
    { name: "Linen Throw — Sage", price: "$89.00", sale: false, fmt: "Storefront", swatch: ["#2D6A4F", "#95D5B2"], updated: "3h ago", trigger: "New product" },
    { name: "Botanical Candle Set", price: "$34.00", sale: false, fmt: "Social", swatch: ["#1B4332", "#52B788"], updated: "5h ago", trigger: "New product" },
    { name: "Trailhead Water Bottle", price: "$28.00", was: "$32.00", sale: true, fmt: "Storefront", swatch: ["#40916C", "#B7E4C7"], updated: "6h ago", trigger: "Sale activated" },
  ];
  const shown = assets.filter((a) => fmt === "All" || a.fmt === fmt);

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 300px", gap: "var(--gap-grid)", alignItems: "start" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
        <Card padding="lg">
          <CardHeader title="Generated assets" subtitle="Synced to your live product catalog — updates on product events"
            action={<Button variant="primary" size="sm" iconLeft={<I.Sparkles size={15} />} onClick={() => onToast("Generating assets for 6 products…")}>Generate now</Button>} />
          <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
            {formats.map((f) => (
              <button key={f} onClick={() => setFmt(f)} style={{ height: 30, padding: "0 13px", borderRadius: "var(--radius-full)", border: "1px solid " + (fmt === f ? "var(--green-700)" : "var(--border-default)"), background: fmt === f ? "var(--green-100)" : "var(--surface-card)", color: fmt === f ? "var(--green-800)" : "var(--text-secondary)", fontWeight: fmt === f ? 600 : 500, font: "var(--type-body)", cursor: "pointer" }}>{f}</button>
            ))}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
            {shown.map((a, i) => <AssetCard key={i} a={a} onOpen={() => setPreview(a)} />)}
          </div>
        </Card>

        <Card padding="lg">
          <CardHeader title="Generation queue" subtitle="Event-triggered jobs, processed automatically" action={<Badge tone="brand" dot>2 running</Badge>} />
          <QueueList onToast={onToast} />
        </Card>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
        <Card padding="lg">
          <CardHeader title="Auto-generation" subtitle="Event triggers" action={<Badge tone="success" dot>On</Badge>} />
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <TriggerRow label="New product listed" defaultChecked />
            <TriggerRow label="Price change detected" defaultChecked hint="via Stripe" />
            <TriggerRow label="Sale activated" defaultChecked />
            <TriggerRow label="Back in stock" />
          </div>
        </Card>

        <Card padding="lg">
          <CardHeader title="Brand kit" subtitle="Applied to every template" />
          <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
            {["#1B4332", "#2D6A4F", "#52B788", "#95D5B2", "#D8F3DC"].map((c) => (
              <span key={c} style={{ flex: 1, height: 34, borderRadius: "var(--radius-sm)", background: c, border: "1px solid rgba(0,0,0,0.04)" }} />
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 0", borderTop: "1px solid var(--border-subtle)" }}>
            <span style={{ font: "var(--type-body)", color: "var(--text-secondary)" }}>Headline font</span>
            <span style={{ font: "var(--type-card-title)", color: "var(--text-primary)" }}>Inter Bold</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 0", borderTop: "1px solid var(--border-subtle)" }}>
            <span style={{ font: "var(--type-body)", color: "var(--text-secondary)" }}>Logo lockup</span>
            <img src="../../assets/orchecomm-mark.svg" height="20" alt="mark" />
          </div>
          <Button variant="secondary" size="sm" fullWidth style={{ marginTop: 12 }} iconLeft={<I.Settings size={14} />} onClick={() => onToast("Opening brand kit editor")}>Edit brand kit</Button>
        </Card>

        <Card padding="lg">
          <CardHeader title="This month" />
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {[["Assets generated", "1,204"], ["Templates used", "8"], ["Auto-triggered", "92%"], ["Avg render time", "11.4s"]].map(([l, v], i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", font: "var(--type-body)" }}><span style={{ color: "var(--text-secondary)" }}>{l}</span><span style={{ color: "var(--text-primary)", fontWeight: 600 }}>{v}</span></div>
            ))}
          </div>
        </Card>
      </div>

      {preview ? <AssetPreviewModal a={preview} onClose={() => setPreview(null)} onToast={onToast} /> : null}
    </div>
  );
}

function TriggerRow({ label, hint, defaultChecked }) {
  const { Switch } = window.OrchEcommDesignSystem_091be6;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <div style={{ flex: 1 }}>
        <div style={{ font: "var(--type-body)", color: "var(--text-primary)", fontWeight: 500 }}>{label}</div>
        {hint ? <div style={{ font: "var(--type-caption)", color: "var(--text-muted)", marginTop: 1 }}>{hint}</div> : null}
      </div>
      <Switch size="sm" defaultChecked={defaultChecked} />
    </div>
  );
}

function QueueList({ onToast }) {
  const I = window.OcIcons;
  const { Badge } = window.OrchEcommDesignSystem_091be6;
  const queue = window.OcData.generationQueue;
  const T = window.OcData.queueTone;
  const labels = { "in-progress": "Generating", pending: "Queued", done: "Done", failed: "Failed" };
  return (
    <div>
      {queue.map((q, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 0", borderTop: i ? "1px solid var(--border-subtle)" : "none" }}>
          <span style={{ width: 32, height: 32, borderRadius: "var(--radius-sm)", background: q.status === "in-progress" ? "var(--green-100)" : "var(--ink-100)", color: q.error ? "var(--color-error)" : "var(--green-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            {q.status === "in-progress" ? <span style={{ display: "inline-flex", animation: "ocd-spin 1s linear infinite" }}><I.Refresh size={15} /></span> : q.error ? <I.X size={15} /> : <I.Image size={15} />}
          </span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ font: "var(--type-body)", color: "var(--text-primary)", fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{q.product}</div>
            <div style={{ font: "var(--type-caption)", color: "var(--text-muted)", marginTop: 1 }}>{q.template} · {q.trigger}</div>
          </div>
          <div style={{ textAlign: "right", flexShrink: 0 }}>
            <Badge tone={T[q.status]} dot={q.status === "in-progress" || q.status === "failed"}>{labels[q.status]}</Badge>
            <div style={{ font: "var(--type-caption)", color: "var(--text-muted)", marginTop: 3 }}>{q.eta}</div>
          </div>
          {q.error ? <button onClick={() => onToast("Retrying " + q.product)} style={{ border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", background: "var(--surface-card)", color: "var(--text-secondary)", width: 30, height: 30, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0 }}><I.Refresh size={14} /></button> : null}
          <style>{`@keyframes ocd-spin{to{transform:rotate(360deg)}}`}</style>
        </div>
      ))}
    </div>
  );
}

function Banner({ a, big }) {
  const I = window.OcIcons;
  return (
    <div style={{ position: "relative", aspectRatio: big ? "16 / 9" : "16 / 10", background: `linear-gradient(135deg, ${a.swatch[0]}, ${a.swatch[1]})`, padding: big ? 28 : 14, display: "flex", flexDirection: "column", justifyContent: "space-between", color: "#fff" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.35, backgroundImage: "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.18) 1px, transparent 0)", backgroundSize: big ? "30px 30px" : "20px 20px" }} />
      <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <img src="../../assets/orchecomm-logo-white.svg" height={big ? 22 : 14} alt="" style={{ opacity: 0.9 }} />
        {a.sale ? <span style={{ fontSize: big ? 14 : 10, fontWeight: 700, letterSpacing: "0.08em", background: "#fff", color: a.swatch[0], borderRadius: 4, padding: big ? "4px 12px" : "2px 7px" }}>SALE</span> : null}
      </div>
      <div style={{ position: "relative" }}>
        <div style={{ fontSize: big ? 30 : 14, fontWeight: 700, lineHeight: 1.15, textWrap: "balance" }}>{a.name}</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: big ? 10 : 6, marginTop: big ? 8 : 4 }}>
          <span style={{ fontSize: big ? 34 : 17, fontWeight: 700 }}>{a.price}</span>
          {a.was ? <span style={{ fontSize: big ? 18 : 12, opacity: 0.7, textDecoration: "line-through" }}>{a.was}</span> : null}
        </div>
      </div>
    </div>
  );
}

function AssetCard({ a, onOpen }) {
  const I = window.OcIcons;
  const [hover, setHover] = React.useState(false);
  return (
    <div onClick={onOpen} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ borderRadius: "var(--radius-md)", overflow: "hidden", border: "1px solid var(--border-default)", background: "var(--surface-card)", boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-xs)", transition: "box-shadow var(--transition-base)", cursor: "pointer" }}>
      <Banner a={a} />
      <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "9px 11px" }}>
        <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--green-600)", boxShadow: "0 0 0 3px rgba(82,183,136,0.18)", flexShrink: 0 }} />
        <span style={{ font: "var(--type-caption)", color: "var(--text-secondary)", flex: 1 }}>{a.fmt} · {a.updated}</span>
        <span style={{ color: "var(--text-muted)" }}><I.Download size={15} /></span>
      </div>
    </div>
  );
}

function AssetPreviewModal({ a, onClose, onToast }) {
  const I = window.OcIcons;
  const { Button, Badge } = window.OrchEcommDesignSystem_091be6;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(28,43,45,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: "var(--z-modal)", padding: 24 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: 640, maxWidth: "100%", background: "var(--surface-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderBottom: "1px solid var(--border-default)" }}>
          <span style={{ font: "var(--type-section)", color: "var(--text-primary)", flex: 1 }}>{a.name}</span>
          <Badge tone="brand">{a.fmt}</Badge>
          <button onClick={onClose} style={{ width: 30, height: 30, display: "inline-flex", alignItems: "center", justifyContent: "center", border: "none", background: "transparent", color: "var(--text-secondary)", cursor: "pointer", borderRadius: "var(--radius-sm)" }}><I.X size={18} /></button>
        </div>
        <div style={{ padding: 18 }}>
          <div style={{ borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-sm)" }}><Banner a={a} big /></div>
          <div style={{ display: "flex", gap: 22, marginTop: 16 }}>
            {[["Trigger", a.trigger], ["Format", a.fmt], ["Generated", a.updated], ["Source", "Live catalog"]].map(([l, v]) => (
              <div key={l}><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>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, padding: "14px 18px", borderTop: "1px solid var(--border-default)" }}>
          <Button variant="secondary" size="md" iconLeft={<I.Refresh size={15} />} onClick={() => { onToast("Regenerating " + a.name); onClose(); }}>Regenerate</Button>
          <Button variant="primary" size="md" iconLeft={<I.Download size={15} />} onClick={() => { onToast("Downloaded " + a.name); }}>Download</Button>
        </div>
      </div>
    </div>
  );
}

window.VisualContentScreen = VisualContentScreen;