/* eslint-disable */
const AgentSettings = () => {
  const [auto, setAuto] = React.useState(true);
  const [emailVerify, setEmailVerify] = React.useState(true);
  const [phoneEnrich, setPhoneEnrich] = React.useState(true);
  const [linkedinSweep, setLinkedinSweep] = React.useState(true);
  const [staleRefresh, setStaleRefresh] = React.useState(true);

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Agent Settings</h1>
          <div className="page-sub">The Clawdified agent populates your contact sheet automatically. These controls govern how it runs.</div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="history" />Audit log</button>
          <button className="btn btn-primary"><Icon name="check" />Save changes</button>
        </div>
      </div>

      <div className="cards" style={{ gridTemplateColumns: "2fr 1fr", maxWidth: 1280 }}>
        <div style={{ display: "grid", gap: 14 }}>
          <div className="card">
            <div className="card-head">
              <div className="icon"><Icon name="bolt" /></div>
              <div style={{ flex: 1 }}>
                <h3 className="card-title">Autonomous operation</h3>
                <div className="card-sub">When enabled, the agent runs on its own schedule and keeps your sheet current. Manual runs below are fallback only.</div>
              </div>
              <div className={"switch" + (auto ? " on" : "")} onClick={() => setAuto(!auto)} />
            </div>
            <div className="card-body">
              <div className="callout">
                <Icon name="info" className="ico" />
                <div><b>The agent runs automatically.</b> Wesley opens the app, reviews the populated sheet, and inspects rows. The agent should never wait for a human to click "go".</div>
              </div>

              <div className="toggle-row">
                <div className="toggle-row-info">
                  <div className="toggle-row-label">Verify email deliverability</div>
                  <div className="toggle-row-desc">Run Hunter / NeverBounce on every newly-added or stale email.</div>
                </div>
                <div className={"switch" + (emailVerify ? " on" : "")} onClick={() => setEmailVerify(!emailVerify)} />
              </div>
              <div className="toggle-row">
                <div className="toggle-row-info">
                  <div className="toggle-row-label">Enrich direct phone numbers</div>
                  <div className="toggle-row-desc">Pull from ZoomInfo + Apollo where missing or older than the freshness window.</div>
                </div>
                <div className={"switch" + (phoneEnrich ? " on" : "")} onClick={() => setPhoneEnrich(!phoneEnrich)} />
              </div>
              <div className="toggle-row">
                <div className="toggle-row-info">
                  <div className="toggle-row-label">LinkedIn title sweep</div>
                  <div className="toggle-row-desc">Detect role changes weekly and update the title field with timestamped provenance.</div>
                </div>
                <div className={"switch" + (linkedinSweep ? " on" : "")} onClick={() => setLinkedinSweep(!linkedinSweep)} />
              </div>
              <div className="toggle-row">
                <div className="toggle-row-info">
                  <div className="toggle-row-label">Auto-refresh stale records</div>
                  <div className="toggle-row-desc">Re-run enrichment on rows that haven't been touched in &gt;30 days.</div>
                </div>
                <div className={"switch" + (staleRefresh ? " on" : "")} onClick={() => setStaleRefresh(!staleRefresh)} />
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div className="icon"><Icon name="settings" /></div>
              <div>
                <h3 className="card-title">Cadence &amp; thresholds</h3>
                <div className="card-sub">Tune how often the agent works and when records are considered stale.</div>
              </div>
            </div>
            <div className="card-body">
              <div className="input-row">
                <div className="input-label">Sweep cadence</div>
                <div className="input-desc">How often the agent revisits the full sheet.</div>
                <select defaultValue="daily">
                  <option value="hourly">Every hour</option>
                  <option value="6h">Every 6 hours</option>
                  <option value="daily">Daily at 8:00 AM local</option>
                  <option value="weekly">Weekly (Mondays)</option>
                </select>
              </div>
              <div className="input-row">
                <div className="input-label">Staleness threshold</div>
                <div className="input-desc">Records untouched longer than this are auto-refreshed.</div>
                <input type="text" defaultValue="30 days" />
              </div>
              <div className="input-row">
                <div className="input-label">Per-run row cap</div>
                <div className="input-desc">Safety limit on rows touched in a single sweep.</div>
                <input type="number" defaultValue="500" />
              </div>
              <div className="input-row">
                <div className="input-label">Confidence floor</div>
                <div className="input-desc">Reject enrichment values below this confidence; mark as missing instead.</div>
                <input type="text" defaultValue="0.65" />
              </div>
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gap: 14 }}>
          <div className="card">
            <div className="card-head">
              <div className="icon"><Icon name="play" /></div>
              <div>
                <h3 className="card-title">Manual run</h3>
                <div className="card-sub">Fallback &amp; testing only.</div>
              </div>
            </div>
            <div className="card-body">
              <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 12, lineHeight: 1.5 }}>
                Use these only to test changes or recover from an outage. The agent should be running on its own.
              </div>
              <button className="btn" style={{ width: "100%", justifyContent: "center", marginBottom: 8 }}><Icon name="refresh" />Run full sweep now</button>
              <button className="btn" style={{ width: "100%", justifyContent: "center", marginBottom: 8 }}><Icon name="flag" />Refresh stale only</button>
              <button className="btn" style={{ width: "100%", justifyContent: "center" }}><Icon name="check" />Verify all emails</button>
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div className="icon"><Icon name="db" /></div>
              <div>
                <h3 className="card-title">Scope</h3>
                <div className="card-sub">What the agent is allowed to do.</div>
              </div>
            </div>
            <div className="card-body" style={{ fontSize: 12, color: "var(--fg-2)", lineHeight: 1.6 }}>
              <div style={{ display: "flex", gap: 6, alignItems: "flex-start", marginBottom: 8 }}>
                <Icon name="check" className="ico" style={{ color: "var(--ok)", flexShrink: 0, marginTop: 2 }} />
                <div>Builds the TAM contact enrichment sheet.</div>
              </div>
              <div style={{ display: "flex", gap: 6, alignItems: "flex-start", marginBottom: 8 }}>
                <Icon name="check" className="ico" style={{ color: "var(--ok)", flexShrink: 0, marginTop: 2 }} />
                <div>Verifies and refreshes contact fields.</div>
              </div>
              <div style={{ height: 1, background: "var(--border)", margin: "10px 0" }} />
              <div style={{ display: "flex", gap: 6, alignItems: "flex-start", marginBottom: 8, color: "var(--fg-3)" }}>
                <Icon name="x" className="ico" style={{ color: "var(--err)", flexShrink: 0, marginTop: 2 }} />
                <div>Will not send outreach.</div>
              </div>
              <div style={{ display: "flex", gap: 6, alignItems: "flex-start", marginBottom: 8, color: "var(--fg-3)" }}>
                <Icon name="x" className="ico" style={{ color: "var(--err)", flexShrink: 0, marginTop: 2 }} />
                <div>Will not score call-worthiness.</div>
              </div>
              <div style={{ display: "flex", gap: 6, alignItems: "flex-start", color: "var(--fg-3)" }}>
                <Icon name="x" className="ico" style={{ color: "var(--err)", flexShrink: 0, marginTop: 2 }} />
                <div>Will not scrape public business listings.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const AgentHealth = ({ providers, runs }) => {
  const status = "ready"; // ready | partial | blocked
  const blocked = providers.filter(p => p.status === "blocked").length;
  const degraded = providers.filter(p => p.status === "degraded").length;
  const overall = blocked > 0 ? "partial" : degraded > 0 ? "partial" : "ready";

  const overallLabel = { ready: "Ready", partial: "Partial — degraded providers", blocked: "Blocked" };
  const overallColor = { ready: "var(--ok)", partial: "var(--warn)", blocked: "var(--err)" };

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Agent Health</h1>
          <div className="page-sub">API providers, run history, and whether the autonomous agent is ready to operate.</div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="refresh" />Re-test all</button>
        </div>
      </div>

      <div className="cards" style={{ gridTemplateColumns: "1fr", maxWidth: 1280 }}>
        <div className="card">
          <div className="card-head" style={{ alignItems: "center" }}>
            <div className="icon" style={{ background: overall === "ready" ? "var(--ok-soft)" : "var(--warn-soft)", color: overall === "ready" ? "oklch(0.32 0.10 155)" : "oklch(0.42 0.13 65)" }}>
              <Icon name="activity" />
            </div>
            <div style={{ flex: 1 }}>
              <h3 className="card-title">Agent is {overallLabel[overall]}</h3>
              <div className="card-sub">
                {overall === "partial"
                  ? `${blocked} provider blocked · ${degraded} degraded. The agent will still run but with reduced coverage on affected fields.`
                  : "All providers responding within SLO."}
              </div>
            </div>
            <div style={{ display: "flex", gap: 6, alignItems: "center", fontFamily: "var(--mono)", fontSize: 12, color: "var(--fg-3)" }}>
              <span style={{ width: 8, height: 8, borderRadius: 50, background: overallColor[overall] }} />
              uptime 99.4% · 24h
            </div>
          </div>

          <div className="card-body" style={{ paddingBottom: 14 }}>
            <div className="kpi-row">
              <div className="kpi">
                <div className="kpi-label">Sweeps today</div>
                <div className="kpi-value">6</div>
                <div className="kpi-foot">last at 11:42 AM</div>
              </div>
              <div className="kpi">
                <div className="kpi-label">Rows touched</div>
                <div className="kpi-value">275</div>
                <div className="kpi-foot">+18% vs. 7d avg</div>
              </div>
              <div className="kpi">
                <div className="kpi-label">P95 enrichment</div>
                <div className="kpi-value">3.4s</div>
                <div className="kpi-foot">SLO &lt; 6s</div>
              </div>
              <div className="kpi">
                <div className="kpi-label">Quota burn</div>
                <div className="kpi-value">34%</div>
                <div className="kpi-foot">of monthly cap</div>
              </div>
              <div className="kpi">
                <div className="kpi-label">Activity (24h)</div>
                <div className="spark" style={{ marginTop: 6 }}>
                  {[3,5,4,7,6,9,8,12,10,14,11,15,13,18,16,20,17,15,12,9,7,5,4,3].map((h,i) => (
                    <div key={i} className={"bar" + (h > 12 ? " tall" : "")} style={{ height: h * 1.6 + "px" }} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="icon"><Icon name="db" /></div>
            <div>
              <h3 className="card-title">Data providers</h3>
              <div className="card-sub">Status, latency, and remaining quota for every external source.</div>
            </div>
          </div>
          <div className="health-grid">
            <div className="head">Provider</div>
            <div className="head">Category</div>
            <div className="head">Latency</div>
            <div className="head">Quota</div>
            <div className="head">Last sync</div>
            <div className="head">Status</div>
            {providers.map((p, i) => (
              <React.Fragment key={p.name}>
                <div className="provider-name">
                  <div style={{ width: 22, height: 22, borderRadius: 4, background: "var(--surface-3)", border: "1px solid var(--border)", display: "grid", placeItems: "center", fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-2)", fontWeight: 600 }}>
                    {p.name.split(/[\s.]/)[0].slice(0,2).toUpperCase()}
                  </div>
                  {p.name}
                </div>
                <div style={{ color: "var(--fg-2)" }}>{p.category}</div>
                <div className="mono">{p.latency}</div>
                <div className="mono">{p.quota}</div>
                <div className="mono">{p.lastSync}</div>
                <div>
                  <span className={"status-pill " + p.status}>
                    <span className="d" />
                    {p.status === "ok" ? "Operational" : p.status === "degraded" ? "Degraded" : "Blocked"}
                  </span>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="icon"><Icon name="history" /></div>
            <div>
              <h3 className="card-title">Recent runs</h3>
              <div className="card-sub">Most recent agent activity, oldest at bottom.</div>
            </div>
          </div>
          <div>
            {runs.map((r, i) => (
              <div key={i} className="run-row">
                <span className="ts">{r.time}</span>
                <span><b style={{ fontWeight: 500 }}>{r.action}</b> <span style={{ color: "var(--fg-3)" }}>—</span> <span className="target">{r.target}</span></span>
                <span className="count">{r.count}</span>
                <span className="ts" style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span className={"status-pill " + (r.status === "ok" ? "ok" : "degraded")} style={{ fontSize: 10, padding: "1px 6px" }}>
                    <span className="d" />
                    {r.duration}
                  </span>
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.AgentSettings = AgentSettings;
window.AgentHealth = AgentHealth;