// screen-ops.jsx — Integrations, Reporting, Usage, Settings
const { useState: useStateO } = React;

// ---------- Integrations ----------
function IntegrationsScreen({ toast }) {
  const C = window.CONNECTORS;
  const Card = ({ c }) => (
    <div className="intg">
      <span className="intg-logo" style={{ background: c.color }}>{c.short}</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="row gap-8"><span style={{ fontWeight: 600, fontSize: 14 }}>{c.name}</span><span className="badge b-gray">{c.kind}</span></div>
        <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{c.detail}</div>
      </div>
      {c.status === "connected"
        ? <div className="row gap-8"><span className="badge b-approved"><span className="dot" style={{ background: "var(--green)" }} />Connected</span><button className="btn btn-sm" onClick={()=>toast("Opened "+c.name+" settings")}>Manage</button></div>
        : <button className="btn btn-sm btn-primary" onClick={()=>toast("Connecting "+c.name+"…")}><Icon name="plus" size={14} />Connect</button>}
    </div>
  );
  const Section = ({ title, sub, items, icon }) => (
    <div className="mb-24">
      <div className="row gap-8 mb-8"><Icon name={icon} size={16} color="var(--gray-500)" /><h3 style={{ margin: 0, fontSize: 15 }}>{title}</h3></div>
      <div className="muted" style={{ fontSize: 12.5, marginBottom: 12 }}>{sub}</div>
      <div className="col gap-12">{items.map((c,i)=><Card key={i} c={c} />)}</div>
    </div>
  );
  return (
    <div className="page">
      <div className="page-head"><h2>Integrations</h2><p>Pluggable connectors for lead data, research, models, and CRM. Add new providers without changing the review workflow.</p></div>
      <div className="card card-pad mb-24" style={{ background: "var(--accent-50)", borderColor: "var(--accent-200)" }}>
        <div className="row gap-8"><Icon name="shield" size={16} color="var(--accent)" /><div style={{ fontSize: 13, color: "var(--gray-700)" }}><strong>CRM sync is approval-based.</strong> The agent never writes to your CRM autonomously — only leads you approve are pushed, as contacts, companies, and optional notes.</div></div>
      </div>
      <Section title="Lead data & research sources" sub="Where the agent discovers and enriches leads." items={C.sources} icon="db" />
      <Section title="CRM" sub="HubSpot is connected as the default. Sync approved leads only." items={C.crm} icon="sync" />
      <Section title="AI models" sub="Reasoning and classification models powering enrichment." items={C.models} icon="agent" />
    </div>
  );
}

// ---------- Reporting ----------
function ReportingScreen() {
  const R = window.REPORT;
  const maxSrc = Math.max(...R.sourcePerf.map(s=>s.found));
  return (
    <div className="page">
      <div className="page-head"><h2>Reporting</h2><p>Lead volume, quality, and source performance across the workspace.</p></div>
      <div className="stats mb-16">
        <Stat label="Leads discovered (30d)" value="468" delta="+12%" deltaDir="up" icon="leads" />
        <Stat label="Approved" value="261" delta="+9%" deltaDir="up" icon="check" />
        <Stat label="Synced to CRM" value="187" delta="+14%" deltaDir="up" icon="sync" />
        <Stat label="Avg fit score" value="83" delta="+2 pts" deltaDir="up" icon="target" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 16, alignItems: "start" }}>
        <div className="card">
          <div className="card-head"><h3>Discovered vs. approved</h3><div className="spacer" /><span className="row gap-12" style={{ fontSize: 12 }}><span className="row gap-6"><span className="dot" style={{ background: "var(--accent-200)", width: 9, height: 9 }} />Found</span><span className="row gap-6"><span className="dot" style={{ background: "var(--accent)", width: 9, height: 9 }} />Approved</span></span></div>
          <div className="card-pad"><BarChart data={R.weeks} valueKey="found" secondKey="approved" height={170} /></div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Leads by industry</h3></div>
          <div className="card-pad">
            {R.industries.map((it,i)=>(
              <div className="bar-row" key={i}>
                <span>{it.name}</span>
                <span className="bar-track"><span className="bar-fill" style={{ width: it.pct*2.4+"%" }} /></span>
                <span className="bar-val">{it.pct}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="card mt-16">
        <div className="card-head"><h3>Source performance</h3><span className="sub">Quality and cost-efficiency by source</span></div>
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Source</th><th>Found</th><th>Approved</th><th>Approval rate</th><th>Cost / approved lead</th><th>Volume</th></tr></thead>
            <tbody>
              {R.sourcePerf.map((s,i)=>{
                const rate = Math.round(s.approved/s.found*100);
                return (
                  <tr key={i} style={{ cursor: "default" }}>
                    <td><span className="row gap-8"><span style={{ width: 20, height: 20, borderRadius: 5, background: s.color, color:"#fff", display:"grid", placeItems:"center", fontSize:9, fontWeight:700 }}>{(window.SOURCES_META[s.name]||{}).short || "··"}</span><strong>{s.name}</strong></span></td>
                    <td className="muted">{s.found}</td>
                    <td className="muted">{s.approved}</td>
                    <td><span className={"badge " + (rate>=60?"b-approved":rate>=45?"b-reviewed":"b-gray")}>{rate}%</span></td>
                    <td className="mono">{s.cost === 0 ? "—" : "$"+s.cost.toFixed(2)}</td>
                    <td><span className="bar-track" style={{ width: 120 }}><span className="bar-fill" style={{ width: s.found/maxSrc*100+"%", background: s.color }} /></span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ---------- Usage ----------
function UsageScreen() {
  const U = window.USAGE;
  const maxDay = Math.max(...U.costByDay);
  const pct = Math.round(U.monthCost/U.budget*100);
  return (
    <div className="page">
      <div className="page-head"><h2>Usage & cost</h2><p>Model calls, token usage, estimated AI cost, and agent run history for this workspace.</p></div>
      <div className="stats mb-16">
        <Stat label="Model calls (MTD)" value={fmtNum(U.monthCalls)} icon="agent" />
        <Stat label="Tokens (MTD)" value={fmtNum(U.monthTokens)} icon="bolt" />
        <Stat label="Est. AI cost (MTD)" value={"$"+U.monthCost.toFixed(2)} icon="dollar" />
        <Stat label="Cost / approved lead" value="$2.18" delta="-6%" deltaDir="up" icon="target" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 16, alignItems: "start" }}>
        <div className="card">
          <div className="card-head"><h3>Daily AI cost</h3><span className="sub">Last 30 days</span></div>
          <div className="card-pad">
            <div className="chart" style={{ height: 130 }}>
              {U.costByDay.map((c,i)=>(<div key={i} className="bar" style={{ height: c/maxDay*100+"%" }}><span className="tip">${c.toFixed(2)}</span></div>))}
            </div>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Monthly budget</h3></div>
          <div className="card-pad">
            <div className="row" style={{ justifyContent: "space-between", alignItems: "baseline" }}><span className="stat-val" style={{ fontSize: 24 }}>${U.monthCost.toFixed(0)}</span><span className="muted">of ${U.budget}</span></div>
            <div className="bar-track" style={{ marginTop: 12, height: 12 }}><span className="bar-fill" style={{ width: pct+"%", background: pct>85?"var(--amber)":"var(--accent)" }} /></div>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 8 }}>{pct}% used · {(30 - new Date().getDate() + 30) % 30 || 4} days left in cycle</div>
            <div className="kv mt-16"><span className="k">Alert threshold</span><span className="v">85%</span></div>
            <div className="kv"><span className="k">Auto-pause at</span><span className="v">$300</span></div>
          </div>
        </div>
      </div>

      <div className="grid-2 mt-16" style={{ alignItems: "start" }}>
        <div className="card">
          <div className="card-head"><h3>Cost breakdown</h3></div>
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>Activity</th><th>Calls</th><th>Tokens</th><th>Cost</th></tr></thead>
              <tbody>
                {U.breakdown.map((b,i)=>(<tr key={i} style={{ cursor: "default" }}><td>{b.label}</td><td className="muted">{fmtNum(b.calls)}</td><td className="muted">{fmtNum(b.tokens)}</td><td className="mono">${b.cost.toFixed(1)}</td></tr>))}
              </tbody>
            </table>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Recent agent runs</h3></div>
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>Run</th><th>Started</th><th>Result</th><th>Cost</th></tr></thead>
              <tbody>
                {window.RUNS.map(r=>(
                  <tr key={r.id} style={{ cursor: "default" }}>
                    <td className="mono">{r.id}</td>
                    <td className="muted" style={{ fontSize: 12.5 }}>{r.started}</td>
                    <td>
                      {r.status==="completed" && <span className="badge b-approved">{r.qualified}/{r.found} qualified</span>}
                      {r.status==="partial" && <span className="badge b-reviewed" title={r.note}>Partial</span>}
                      {r.status==="failed" && <span className="badge b-rejected" title={r.note}>Failed</span>}
                    </td>
                    <td className="mono">${r.cost.toFixed(2)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="card-pad" style={{ borderTop: "1px solid var(--border)", paddingTop: 12 }}>
            <div className="row gap-8" style={{ fontSize: 12.5, color: "var(--gray-500)" }}><Icon name="info" size={14} />Failed provider/model calls are logged here without breaking the workspace.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Settings ----------
function SettingsScreen({ toast }) {
  const members = [
    { name: "Dana Whitfield", email: "dana@abccompany.com", role: "Sales leader", init: "DW" },
    { name: "Sam Okafor", email: "sam@abccompany.com", role: "SDR", init: "SO" },
    { name: "Maria Chen", email: "maria@abccompany.com", role: "SDR", init: "MC" },
    { name: "Alex Reyes", email: "alex@abccompany.com", role: "Admin", init: "AR" },
  ];
  return (
    <div className="page">
      <div className="page-head"><h2>Workspace settings</h2><p>Tenant configuration, team, and data controls for {window.WORKSPACE.name}.</p></div>
      <div className="grid-2" style={{ alignItems: "start" }}>
        <div className="col gap-16">
          <div className="card card-pad">
            <div className="section-title">Workspace</div>
            <div className="field"><label>Workspace name</label><input className="input" defaultValue={window.WORKSPACE.name} /></div>
            <div className="grid-2">
              <div className="field"><label>Industry</label><input className="input" defaultValue={window.WORKSPACE.industry} /></div>
              <div className="field"><label>HQ</label><input className="input" defaultValue={window.WORKSPACE.hq} /></div>
            </div>
            <div className="field" style={{ marginBottom: 0 }}><label>Plan</label><div className="row gap-8"><span className="badge b-new">{window.WORKSPACE.plan}</span><span className="muted" style={{ fontSize: 12.5 }}>Up to 6 seats · 500 approved leads / mo</span></div></div>
          </div>
          <div className="card card-pad" style={{ borderColor: "var(--red-bd)" }}>
            <div className="section-title row gap-6" style={{ color: "var(--red)" }}><Icon name="shield" size={13} color="var(--red)" />Data controls</div>
            <div className="kv"><span className="k">Tenant data isolation</span><span className="badge b-approved"><span className="dot" style={{ background: "var(--green)" }} />Enforced</span></div>
            <div className="kv"><span className="k">Export all workspace data</span><button className="btn btn-sm" onClick={()=>toast("Preparing data export")}><Icon name="download" size={13} />Export</button></div>
            <div className="kv" style={{ borderBottom: "none" }}><span className="k">Delete uploaded context & leads</span><button className="btn btn-sm btn-danger" onClick={()=>toast("Confirmation required")}><Icon name="trash" size={13} />Delete…</button></div>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><Icon name="users" size={16} color="var(--gray-500)" /><h3>Team</h3><div className="spacer" /><button className="btn btn-sm btn-primary" onClick={()=>toast("Invite sent")}><Icon name="plus" size={13} />Invite</button></div>
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>Member</th><th>Role</th><th></th></tr></thead>
              <tbody>
                {members.map((m,i)=>(
                  <tr key={i} style={{ cursor: "default" }}>
                    <td><div className="cell-co"><span className="avatar" style={{ width: 30, height: 30, background: logoFor(m.name) }}>{m.init}</span><div><div className="co-name">{m.name}</div><div className="co-url">{m.email}</div></div></div></td>
                    <td><span className="badge b-gray">{m.role}</span></td>
                    <td><button className="btn btn-ghost btn-sm"><Icon name="settings" size={14} color="var(--gray-400)" /></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { IntegrationsScreen, ReportingScreen, UsageScreen, SettingsScreen });