// =================================================================
// pw-screens-operator.jsx — Platform Operator §9–12
//   OpOverview · SaasPlans · Brands · DiscountTemplates · PublisherConfig
// =================================================================

// =================================================================
// Operator overview
// =================================================================
const OpOverviewScreen = ({ data }) => {
  const totalSubs = data.publishers.reduce((a, p) => a + p.subscribers, 0);
  const activeBrands = data.advertisers.filter(b => b.status === "active").length;
  const liveTemplates = data.discountTemplates.filter(t => t.status === "active").length;
  const mrr = data.publishers.reduce((a, p) => {
    const plan = data.platformPlans.find(pl => pl.plan_code === p.plan_code);
    return a + (plan?.price_fiat || 0);
  }, 0);

  return (
    <Screen>
      <PageHead icon={IconChart} title="Platform Overview" subtitle="Tenants, advertisers and catalog across krafts.ai." />
      <KpiGrid>
        <StatCard label="Publishers" value={data.publishers.length} sub="tenants" icon={<IconBuilding size={16}/>}/>
        <StatCard label="Total subscribers" value={fmt.compact(totalSubs)} sub="across tenants" icon={<IconUsers size={16}/>}/>
        <StatCard label="Active brands" value={activeBrands} sub="advertisers" icon={<IconStore size={16}/>}/>
        <StatCard label="Live discount codes" value={liveTemplates} sub="templates" icon={<IconTicket size={16}/>}/>
        <StatCard label="Platform MRR" value={fmt.currency(mrr)} delta="+6.2%" deltaTone="good" sub="recurring" icon={<IconReceipt size={16}/>}/>
      </KpiGrid>

      <Card title="Publishers" subtitle="Plan, status and scale by tenant." padded={false}>
        <DataTable rows={data.publishers} keyField="publisher_id" defaultSort={{ key: "subscribers", dir: "desc" }}
          columns={[
            { key: "name", label: "Publisher", render: r => <strong style={{ color: "var(--ink)" }}>{r.name}</strong> },
            { key: "plan_code", label: "SaaS plan", render: r => <Pill tone="accent" style={{ textTransform: "capitalize" }}>{r.plan_code}</Pill> },
            { key: "subscribers", label: "Subscribers", align: "right", render: r => <span style={{ fontFamily: "var(--mono)", fontSize: 12.5 }}>{fmt.number(r.subscribers)}</span> },
            { key: "status", label: "Status", render: r => <StatusPill status={r.status}/> },
          ]}/>
      </Card>
    </Screen>
  );
};

// =================================================================
// §9 SaaS Plans
// =================================================================
const SaasPlanModal = ({ open, onClose, plan, onSave }) => {
  const [f, setF] = React.useState(plan || {});
  React.useEffect(() => { if (open) setF(plan ? { ...plan, _features: plan.features.join("\n") } : {}); }, [open, plan]);
  const set = (patch) => setF(prev => ({ ...prev, ...patch }));
  if (!plan) return null;
  return (
    <Modal open={open} onClose={onClose} title={`Edit · ${plan.name}`} width={480}
      footer={<><Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="primary" onClick={() => { onSave({ ...f, features: (f._features || "").split("\n").map(s => s.trim()).filter(Boolean) }); onClose(); }}>Save plan</Btn></>}>
      <FormField label="Name"><Input value={f.name || ""} onChange={e => set({ name: e.target.value })}/></FormField>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
        <FormField label="Price"><Input prefix="$" type="number" value={f.price_fiat ?? ""} placeholder="—" onChange={e => set({ price_fiat: e.target.value === "" ? null : Number(e.target.value) })}/></FormField>
        <FormField label="Currency"><Input value={f.currency || "USD"} onChange={e => set({ currency: e.target.value })}/></FormField>
        <FormField label="Interval"><Input value={f.interval || "month"} onChange={e => set({ interval: e.target.value })}/></FormField>
      </div>
      <FormField label="Features" hint="One per line."><Textarea rows={5} value={f._features || ""} onChange={e => set({ _features: e.target.value })}/></FormField>
      <FormField label="Status">
        <SegmentedControl value={f.status || "active"} onChange={v => set({ status: v })} options={[{ label: "Active", value: "active" }, { label: "Retired", value: "retired" }]}/>
      </FormField>
    </Modal>
  );
};

const SaasPlansScreen = ({ data, setData }) => {
  const [editing, setEditing] = React.useState(null);
  const save = (f) => { window.__api.write("updatePlatformPlan", d => ({ ...d, platformPlans: d.platformPlans.map(p => p.plan_code === f.plan_code ? { ...p, ...f } : p) }), { params: { plan_code: f.plan_code }, body: f, ok: `Saved “${f.name}”`, err: "Couldn’t save plan" }); };
  return (
    <Screen>
      <PageHead icon={IconRocket} title="SaaS Plans" subtitle="Platform subscription tiers offered to publishers." />
      <div className="pw-plan-grid">
        {data.platformPlans.map(p => (
          <div key={p.plan_code} className="pw-plan-card">
            <div className="pw-plan-top">
              <div className="pw-plan-name">{p.name}</div>
              <StatusPill status={p.status}/>
            </div>
            <div className="pw-plan-price">{pwMoney(p.price_fiat)}{p.price_fiat ? <span className="pw-plan-int">/{p.interval}</span> : null}</div>
            <ul className="pw-plan-feats">{p.features.map((ft, i) => <li key={i}><IconCheck size={13}/> {ft}</li>)}</ul>
            <div style={{ marginTop: "auto", paddingTop: 14 }}>
              <Btn kind="secondary" icon={<IconPencil size={14}/>} onClick={() => setEditing(p)} style={{ width: "100%", justifyContent: "center" }}>Edit plan</Btn>
            </div>
          </div>
        ))}
      </div>
      <SaasPlanModal open={!!editing} onClose={() => setEditing(null)} plan={editing} onSave={save}/>
    </Screen>
  );
};

// =================================================================
// §10 Brands (Advertisers)
// =================================================================
const BrandModal = ({ open, onClose, brand, onSave }) => {
  const blank = { name: "", contact_email: "", status: "active" };
  const [f, setF] = React.useState(blank);
  React.useEffect(() => { if (open) setF(brand ? { ...brand } : { ...blank }); }, [open, brand]);
  const set = (patch) => setF(prev => ({ ...prev, ...patch }));
  return (
    <Modal open={open} onClose={onClose} title={brand ? "Edit brand" : "New brand"} width={460}
      footer={<><Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="primary" disabled={!f.name || !f.contact_email} onClick={() => { onSave(f, !!brand); onClose(); }}>{brand ? "Save brand" : "Create brand"}</Btn></>}>
      <FormField label="Brand name"><Input value={f.name} onChange={e => set({ name: e.target.value })} placeholder="Brew & Bean"/></FormField>
      <FormField label="Contact email"><Input type="email" value={f.contact_email} onChange={e => set({ contact_email: e.target.value })} placeholder="partners@brand.com"/></FormField>
      <FormField label="Status">
        <SegmentedControl value={f.status} onChange={v => set({ status: v })} options={[{ label: "Active", value: "active" }, { label: "Paused", value: "paused" }]}/>
      </FormField>
    </Modal>
  );
};

const BrandsScreen = ({ data, setData }) => {
  const [modal, setModal] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [q, setQ] = React.useState("");
  const save = (f, isEdit) => {
    if (isEdit) {
      window.__api.write("updateAdvertiser",
        d => ({ ...d, advertisers: d.advertisers.map(b => b.advertiser_id === editing.advertiser_id ? { ...b, ...f } : b) }),
        { params: { advertiser_id: editing.advertiser_id }, body: f, ok: "Brand updated", err: "Couldn’t update brand" });
    } else {
      const advertiser_id = "adv_" + Math.random().toString(36).slice(2, 6);
      window.__api.write("createAdvertiser",
        d => ({ ...d, advertisers: [{ ...f, advertiser_id, codes: 0 }, ...d.advertisers] }),
        { body: { ...f, advertiser_id }, ok: "Brand created", err: "Couldn’t create brand" });
    }
  };
  const rows = data.advertisers.filter(b => (b.name + b.contact_email).toLowerCase().includes(q.toLowerCase()));
  return (
    <Screen>
      <PageHead icon={IconStore} title="Brands" subtitle="Advertisers that supply products, services and discount codes."
        actions={<Btn kind="primary" icon={<IconPlus size={15}/>} onClick={() => { setEditing(null); setModal(true); }}>New brand</Btn>}/>
      <Toolbar search={q} onSearchChange={setQ} searchPlaceholder="Search brands"/>
      <DataTable rows={rows} keyField="advertiser_id" rowsPerPage={8} onRowClick={(r) => { setEditing(r); setModal(true); }}
        columns={[
          { key: "name", label: "Brand", render: r => <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}><Avatar name={r.name} size={26}/><strong style={{ color: "var(--ink)" }}>{r.name}</strong></span> },
          { key: "contact_email", label: "Contact", render: r => <span style={{ color: "var(--muted)", fontSize: 13 }}>{r.contact_email}</span> },
          { key: "codes", label: "Codes", align: "right", render: r => <span style={{ fontFamily: "var(--mono)", fontSize: 12.5 }}>{r.codes}</span> },
          { key: "status", label: "Status", render: r => <StatusPill status={r.status}/> },
          { key: "_e", label: "", sortable: false, align: "right", render: r => <Btn kind="ghost" size="sm" icon={<IconPencil size={13}/>} onClick={() => { setEditing(r); setModal(true); }}>Edit</Btn> },
        ]}/>
      <BrandModal open={modal} onClose={() => setModal(false)} brand={editing} onSave={save}/>
    </Screen>
  );
};

// =================================================================
// §11 Discount-Code Templates
// =================================================================
const TemplateDrawer = ({ open, onClose, tpl, advertisers, publishers, onSave }) => {
  const blank = { advertiser_id: advertisers[0]?.advertiser_id || "", code: "", name: "", discount_type: "percent", discount_value: 20, currency: "USD", applies_to: "product", min_order_amount: 0, max_discount_amount: null, valid_from: "2026-06-01", valid_until: "2026-12-31", status: "active", publisher_ids: [] };
  const [f, setF] = React.useState(blank);
  React.useEffect(() => { if (open) setF(tpl ? { ...tpl, publisher_ids: [...tpl.publisher_ids] } : { ...blank }); }, [open, tpl]);
  const set = (patch) => setF(prev => ({ ...prev, ...patch }));
  const togglePub = (id) => set({ publisher_ids: f.publisher_ids.includes(id) ? f.publisher_ids.filter(x => x !== id) : [...f.publisher_ids, id] });

  return (
    <Drawer open={open} onClose={onClose} title={tpl ? `Edit · ${tpl.code}` : "New discount template"} width={560}
      footer={<><Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="primary" disabled={!f.code || !f.name} onClick={() => { onSave(f, !!tpl); onClose(); }}>{tpl ? "Save template" : "Create template"}</Btn></>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        <FieldRow label="Brand" layout="stacked">
          <Select value={f.advertiser_id} onChange={v => set({ advertiser_id: v })} options={advertisers.map(a => ({ label: a.name, value: a.advertiser_id }))}/>
        </FieldRow>
        <FieldRow label="Code & name" layout="stacked">
          <FieldGroup cols={2}>
            <Input value={f.code} onChange={e => set({ code: e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "") })} placeholder="BREW30"/>
            <Input value={f.name} onChange={e => set({ name: e.target.value })} placeholder="30% off whole-bean"/>
          </FieldGroup>
        </FieldRow>
        <FieldRow label="Discount" layout="stacked">
          <FieldGroup cols={3}>
            <SegmentedControl value={f.discount_type} onChange={v => set({ discount_type: v })} options={[{ label: "Percent", value: "percent" }, { label: "Flat", value: "flat" }]}/>
            <Input prefix={f.discount_type === "flat" ? "$" : ""} suffix={f.discount_type === "percent" ? "%" : ""} type="number" value={f.discount_value} onChange={e => set({ discount_value: Number(e.target.value) || 0 })}/>
            <Select value={f.applies_to} onChange={v => set({ applies_to: v })} options={[{ label: "Products", value: "product" }, { label: "Services", value: "service" }, { label: "Both", value: "both" }]}/>
          </FieldGroup>
        </FieldRow>
        <FieldRow label="Order limits" layout="stacked">
          <FieldGroup cols={2}>
            <div><label className="pw-lbl">Min order</label><Input prefix="$" type="number" value={f.min_order_amount} onChange={e => set({ min_order_amount: Number(e.target.value) || 0 })}/></div>
            <div><label className="pw-lbl">Max discount</label><Input prefix="$" type="number" value={f.max_discount_amount ?? ""} placeholder="∞" onChange={e => set({ max_discount_amount: e.target.value === "" ? null : Number(e.target.value) })}/></div>
          </FieldGroup>
        </FieldRow>
        <FieldRow label="Validity" layout="stacked">
          <FieldGroup cols={2}>
            <div><label className="pw-lbl">From</label><Input type="date" value={f.valid_from} onChange={e => set({ valid_from: e.target.value })}/></div>
            <div><label className="pw-lbl">Until</label><Input type="date" value={f.valid_until} onChange={e => set({ valid_until: e.target.value })}/></div>
          </FieldGroup>
        </FieldRow>
        <FieldRow label="Status" layout="stacked">
          <SegmentedControl value={f.status} onChange={v => set({ status: v })} options={[{ label: "Active", value: "active" }, { label: "Draft", value: "draft" }, { label: "Expired", value: "expired" }]}/>
        </FieldRow>
        <FieldRow label="Assign to publishers" hint={`${f.publisher_ids.length} selected`} layout="stacked">
          <div className="pw-assign">
            {publishers.map(p => (
              <label key={p.publisher_id} className="pw-assign-row">
                <Checkbox checked={f.publisher_ids.includes(p.publisher_id)} onChange={() => togglePub(p.publisher_id)} label={p.name}/>
              </label>
            ))}
          </div>
        </FieldRow>
      </div>
      <style>{`
        .pw-assign { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px; }
        .pw-assign-row { padding: 8px 8px; border-radius: 8px; }
        .pw-assign-row:hover { background: var(--hover); }
      `}</style>
    </Drawer>
  );
};

const DiscountTemplatesScreen = ({ data, setData }) => {
  const [drawer, setDrawer] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [q, setQ] = React.useState("");
  const brandName = (id) => (data.advertisers.find(a => a.advertiser_id === id) || {}).name || "—";

  const save = (f, isEdit) => {
    if (isEdit) {
      window.__api.write("updateDiscountCode",
        d => ({ ...d, discountTemplates: d.discountTemplates.map(t => t.code_id === editing.code_id ? { ...t, ...f } : t) }),
        { params: { code_id: editing.code_id }, body: f, ok: "Template saved", err: "Couldn’t save template" });
    } else {
      const code_id = "dc_" + Math.random().toString(36).slice(2, 7);
      window.__api.write("createDiscountCode",
        d => ({ ...d, discountTemplates: [{ ...f, code_id }, ...d.discountTemplates] }),
        { body: { ...f, code_id }, ok: "Template created", err: "Couldn’t create template" });
    }
  };

  const rows = data.discountTemplates.filter(t => (t.code + t.name + brandName(t.advertiser_id)).toLowerCase().includes(q.toLowerCase()));

  return (
    <Screen>
      <PageHead icon={IconTicket} title="Discount Codes" subtitle="Brand discount-code templates and their publisher assignments."
        actions={<Btn kind="primary" icon={<IconPlus size={15}/>} onClick={() => { setEditing(null); setDrawer(true); }}>New template</Btn>}/>
      <Toolbar search={q} onSearchChange={setQ} searchPlaceholder="Search codes, names, brands"/>
      <DataTable rows={rows} keyField="code_id" rowsPerPage={8} onRowClick={(r) => { setEditing(r); setDrawer(true); }}
        columns={[
          { key: "code", label: "Code", render: r => <span style={{ fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--ink)" }}>{r.code}</span> },
          { key: "name", label: "Name" },
          { key: "advertiser_id", label: "Brand", render: r => brandName(r.advertiser_id) },
          { key: "discount", label: "Discount", sortable: false, render: r => <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{discountSummary(r)}</span> },
          { key: "publisher_ids", label: "Publishers", align: "right", accessor: r => r.publisher_ids.length, render: r => <Pill tone={r.publisher_ids.length ? "info" : "neutral"}>{r.publisher_ids.length}</Pill> },
          { key: "status", label: "Status", render: r => <StatusPill status={r.status}/> },
        ]}/>
      <TemplateDrawer open={drawer} onClose={() => setDrawer(false)} tpl={editing} advertisers={data.advertisers} publishers={data.publishers} onSave={save}/>
    </Screen>
  );
};

// =================================================================
// §12 Publisher Config
// =================================================================
const PublisherConfigScreen = ({ data, setData }) => {
  const [pid, setPid] = React.useState(data.publishers[0]?.publisher_id);
  const pub = data.publishers.find(p => p.publisher_id === pid);
  const [onb, setOnb] = React.useState(pub?.onboarding);
  React.useEffect(() => { setOnb(data.publishers.find(p => p.publisher_id === pid)?.onboarding); }, [pid, data.publishers]);

  if (!pub) return null;
  const onbDirty = JSON.stringify(onb) !== JSON.stringify(pub.onboarding);
  const saveOnb = () => { window.__api.write("updateOnboardingConfig", d => ({ ...d, publishers: d.publishers.map(p => p.publisher_id === pid ? { ...p, onboarding: onb } : p) }), { params: { publisher_id: pid }, body: onb, ok: "Onboarding config saved", err: "Couldn’t save config" }); };

  const setGateway = (code, patch) => {
    window.__api.write("updateGatewayRouting",
      d => ({ ...d, publishers: d.publishers.map(p => p.publisher_id === pid ? { ...p, gateways: p.gateways.map(g => g.gateway_code === code ? { ...g, ...patch } : g) } : p) }),
      { params: { publisher_id: pid, gateway_code: code }, body: patch, ok: `Gateway ${code} updated`, err: "Couldn’t update gateway" });
  };

  return (
    <Screen>
      <PageHead icon={IconBuilding} title="Publisher Config" subtitle="Onboarding coins and gateway routing per tenant."
        actions={<div style={{ minWidth: 220 }}><Select value={pid} onChange={setPid} options={data.publishers.map(p => ({ label: p.name, value: p.publisher_id }))}/></div>}/>

      <div className="pw-pubcfg">
        <Card title="Onboarding / welcome coins" subtitle="Coins granted to new readers on signup."
          action={<Btn kind="primary" size="sm" disabled={!onbDirty} onClick={saveOnb}>Save</Btn>}>
          {onb && (
            <div>
              <FieldRow label="Enabled" hint="Grant welcome coins on signup.">
                <Toggle checked={onb.enabled} onChange={v => setOnb({ ...onb, enabled: v })}/>
              </FieldRow>
              <FieldRow label="Welcome coins">
                <NumberStepper value={onb.welcome_coins_amount} onChange={v => setOnb({ ...onb, welcome_coins_amount: v })} min={0} max={100000} step={5} suffix="coins"/>
              </FieldRow>
              <FieldRow label="Reason" hint="Shown on the wallet ledger entry.">
                <Input value={onb.welcome_coins_reason} onChange={e => setOnb({ ...onb, welcome_coins_reason: e.target.value })} placeholder="Welcome bonus"/>
              </FieldRow>
              <FieldRow label="Eligible policy">
                <SegmentedControl value={onb.eligible_policy} onChange={v => setOnb({ ...onb, eligible_policy: v })}
                  options={[{ label: "New users", value: "new_users" }, { label: "All users", value: "all_users" }]}/>
              </FieldRow>
            </div>
          )}
        </Card>

        <Card title="Payment gateway routing" subtitle="Priority and country overrides per gateway." padded={false}>
          {pub.gateways.length === 0 ? (
            <EmptyState icon={<IconCard size={28}/>} title="No gateways configured" description="This publisher has no payment gateways yet."/>
          ) : (
            <div className="pw-gw">
              {pub.gateways.sort((a, b) => a.priority - b.priority).map(g => (
                <div key={g.gateway_code} className="pw-gw-row">
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span className="pw-gw-icon"><IconCard size={16}/></span>
                    <div>
                      <div style={{ fontWeight: 600, textTransform: "capitalize" }}>{g.gateway_code}</div>
                      <div style={{ fontSize: 12, color: "var(--muted)" }}>
                        Priority {g.priority}
                        {Object.keys(g.country_overrides || {}).length > 0 && <> · overrides: {Object.entries(g.country_overrides).map(([k, v]) => `${k}→${v}`).join(", ")}</>}
                      </div>
                    </div>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                    <StatusPill status={g.enabled ? "active" : "inactive"}>{g.enabled ? "Enabled" : "Disabled"}</StatusPill>
                    <Toggle checked={g.enabled} onChange={(v) => setGateway(g.gateway_code, { enabled: v })}/>
                  </div>
                </div>
              ))}
            </div>
          )}
        </Card>
      </div>

      <style>{`
        .pw-pubcfg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
        .pw-pubcfg > * { min-width: 0; }
        @media (max-width: 1023px) { .pw-pubcfg { grid-template-columns: 1fr; } }
        .pw-gw { display: flex; flex-direction: column; }
        .pw-gw-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px var(--pad); border-bottom: 1px solid var(--line-2); }
        .pw-gw-row:last-child { border-bottom: none; }
        .pw-gw-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
      `}</style>
    </Screen>
  );
};

Object.assign(window, { OpOverviewScreen, SaasPlansScreen, BrandsScreen, DiscountTemplatesScreen, PublisherConfigScreen });