// Browser bridge / extension pairing page

function ExtensionPage({ theme }) {
  const t = theme;
  const store = useStore();
  const isSerif = t.fontDisplay.includes("serif") || t.fontDisplay.includes("Fraunces") || t.fontDisplay.includes("Instrument");
  const [pairCode] = React.useState(() => {
    const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
    const gen = (n) => Array.from({length:n}, () => chars[Math.floor(Math.random()*chars.length)]).join("");
    return `AC-${gen(4)}-${gen(4)}`;
  });
  const [copied, setCopied] = React.useState(false);

  return (
    <main style={{ flex: 1, background: t.chatBg, color: t.fg, fontFamily: t.fontSans, overflowY: "auto", minWidth: 0 }}>
      <div style={{ padding: "24px 32px", borderBottom: `1px solid ${t.line}`, background: t.bg2 }}>
        <div style={{
          fontFamily: t.fontDisplay, fontWeight: t.weightHeading,
          fontSize: isSerif ? 36 : 22, letterSpacing: isSerif ? -0.5 : -0.2,
          lineHeight: 1, marginBottom: 6,
        }}>Browser bridge</div>
        <div style={{ fontSize: 12, color: t.fg2, fontFamily: t.fontMono, maxWidth: 680, lineHeight: 1.5 }}>
          Install the Agents Control extension and pair it with a machine. Agents on that machine can then read, navigate and click your browser.
        </div>
      </div>

      <div style={{ padding: "24px 32px", display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)", gap: 20, maxWidth: 1200 }}>
        {/* Left column: steps */}
        <div>
          <StepBlock t={t} n={1} title="Install the extension">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 10 }}>
              <BrowserBtn t={t} name="Chrome" version="v0.8.4" primary />
              <BrowserBtn t={t} name="Edge" version="v0.8.4" />
              <BrowserBtn t={t} name="Brave" version="v0.8.4" />
              <BrowserBtn t={t} name="Firefox" version="v0.8.2" />
            </div>
            <div style={{ fontSize: 11, color: t.fg3, fontFamily: t.fontMono, marginTop: 10 }}>
              Or load the unpacked build: <span style={{ color: t.accent }}>agents-control-ext.zip</span>
            </div>
          </StepBlock>

          <StepBlock t={t} n={2} title="Pair with a machine">
            <div style={{ fontSize: 12, color: t.fg2, marginBottom: 12, lineHeight: 1.5 }}>
              Open the extension popup on the machine you want to pair, then enter this code. It expires in 10 minutes.
            </div>
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "16px 18px", background: t.panel, border: `1px solid ${t.line2}`, borderRadius: t.radius,
            }}>
              <div style={{ flex: 1, fontFamily: t.fontMono, fontSize: 24, fontWeight: 600, letterSpacing: 4, color: t.accent }}>{pairCode}</div>
              <button onClick={() => { navigator.clipboard?.writeText(pairCode); setCopied(true); setTimeout(() => setCopied(false), 1500); }} style={{
                padding: "7px 14px", background: copied ? t.accent : t.panel2,
                border: `1px solid ${copied ? t.accent : t.line2}`,
                color: copied ? t.bg : t.fg, borderRadius: t.radius, cursor: "pointer",
                fontFamily: t.fontSans, fontSize: 12, fontWeight: 500,
              }}>{copied ? "Copied" : "Copy code"}</button>
              <button style={{
                padding: "7px 14px", background: "transparent",
                border: `1px solid ${t.line2}`, color: t.fg2, borderRadius: t.radius,
                cursor: "pointer", fontFamily: t.fontSans, fontSize: 12,
              }}>Regenerate</button>
            </div>
          </StepBlock>

          <StepBlock t={t} n={3} title="Approve browser access" last>
            <div style={{ fontSize: 12, color: t.fg2, lineHeight: 1.5, marginBottom: 12 }}>
              The first time an agent asks to take over your browser, you'll see a confirmation in the extension. Approve once per origin, or give blanket trust on a per-agent basis.
            </div>
            <div style={{
              padding: 14, background: t.panel, border: `1px solid ${t.line}`,
              borderLeft: `2px solid ${t.accent}`, borderRadius: t.radius,
              fontSize: 11.5, fontFamily: t.fontMono, color: t.fg2, lineHeight: 1.5,
            }}>
              Agents can <span style={{ color: t.fg }}>see pages</span>, <span style={{ color: t.fg }}>click / type</span>, <span style={{ color: t.fg }}>open tabs</span> and <span style={{ color: t.fg }}>read cookies for approved origins only</span>. They cannot access password managers or disable the extension.
            </div>
          </StepBlock>
        </div>

        {/* Right column: paired browsers + capabilities */}
        <div>
          <div style={{ fontFamily: t.fontMono, fontSize: 10.5, letterSpacing: 1, textTransform: "uppercase", color: t.fg3, marginBottom: 10 }}>
            Paired browsers
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <div style={{
              padding: "12px 14px", background: "transparent",
              border: `1px dashed ${t.line2}`, borderRadius: t.radius,
              color: t.fg3, fontSize: 12, textAlign: "center",
            }}>No paired browsers yet. Install the extension to get started.</div>
          </div>

          <div style={{ marginTop: 24 }}>
            <div style={{ fontFamily: t.fontMono, fontSize: 10.5, letterSpacing: 1, textTransform: "uppercase", color: t.fg3, marginBottom: 10 }}>
              What agents can do
            </div>
            <CapabilityItem t={t} label="Read page content" desc="HTML, forms, visible text on approved origins" />
            <CapabilityItem t={t} label="Click & type" desc="Fill forms, click buttons, scroll, select" />
            <CapabilityItem t={t} label="Navigate" desc="Open / close tabs, follow links, back / forward" />
            <CapabilityItem t={t} label="Screenshots" desc="Capture current viewport for the agent to analyze" />
            <CapabilityItem t={t} label="Downloads" desc="Trigger downloads and read them back" />
          </div>
        </div>
      </div>
    </main>
  );
}

function StepBlock({ t, n, title, children, last }) {
  return (
    <div style={{
      position: "relative", paddingLeft: 40, paddingBottom: last ? 0 : 28,
      borderLeft: last ? "none" : `1px dashed ${t.line2}`, marginLeft: 14,
    }}>
      <div style={{
        position: "absolute", left: -14, top: 0,
        width: 28, height: 28, borderRadius: 999,
        background: t.panel, border: `1px solid ${t.line2}`,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: t.fontMono, fontSize: 12, fontWeight: 600, color: t.accent,
      }}>{n}</div>
      <div style={{ fontFamily: t.fontDisplay, fontSize: 16, fontWeight: 600, marginBottom: 8, paddingTop: 3 }}>{title}</div>
      {children}
    </div>
  );
}

function BrowserBtn({ t, name, version, primary }) {
  return (
    <button style={{
      padding: "12px 14px", background: primary ? t.accent : t.panel,
      color: primary ? t.bg : t.fg,
      border: `1px solid ${primary ? t.accent : t.line2}`,
      borderRadius: t.radius, cursor: "pointer", fontFamily: t.fontSans,
      display: "flex", alignItems: "center", gap: 10, textAlign: "left",
    }}>
      <div style={{
        width: 26, height: 26, borderRadius: 999,
        background: primary ? "rgba(0,0,0,0.12)" : t.panel2,
        border: `1px solid ${primary ? "rgba(0,0,0,0.2)" : t.line}`,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: t.fontMono, fontSize: 11, fontWeight: 700,
      }}>{name[0]}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>Add to {name}</div>
        <div style={{ fontSize: 10, fontFamily: t.fontMono, opacity: 0.7 }}>{version}</div>
      </div>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
    </button>
  );
}

function CapabilityItem({ t, label, desc }) {
  return (
    <div style={{
      padding: "8px 0", borderTop: `1px solid ${t.line}`,
      display: "flex", alignItems: "flex-start", gap: 10,
    }}>
      <div style={{ width: 4, height: 4, borderRadius: 999, background: t.accent, marginTop: 7, flexShrink: 0 }} />
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12, color: t.fg, fontWeight: 500 }}>{label}</div>
        <div style={{ fontSize: 11, color: t.fg3, marginTop: 1 }}>{desc}</div>
      </div>
    </div>
  );
}

window.ExtensionPage = ExtensionPage;