const { useState, useEffect, useMemo, useRef } = React;

/* Extension — Chrome popup mockup */

function ExtensionPage({ go, user }) {
  return (
    <>
      <div className="work-head">
        <div className="col" style={{ gap: 2 }}>
          <div className="title">Extension</div>
          <div className="sub">Preview your extension popup and manage which browsers you've installed it on.</div>
        </div>
        <div className="spacer"/>
        <button className="btn primary sm"><I.Download/> Reinstall</button>
      </div>

      <div className="work-body">
        <div className="ext-grid">
          {/* Popup mockup */}
          <div className="col" style={{ gap: 14 }}>
            <span className="eyebrow">EXTENSION POPUP · PREVIEW</span>
            <div className="ext-stage">
              <div className="ext-browser-frame">
                <div className="ext-browser-bar">
                  <span className="dot r"/><span className="dot y"/><span className="dot g"/>
                  <span className="ext-tab">linkedin.com/company/sterling-wright</span>
                  <div className="ext-toolbar">
                    <span className="ext-tb-icon"/><span className="ext-tb-icon"/>
                    <div className="ext-tb-iq" title="ContactIQ Extension">
                      <span style={{ font: "700 9px var(--font-sans)" }}>AI</span>
                      <span className="ext-tb-badge">3</span>
                    </div>
                    <span className="ext-tb-icon"/>
                  </div>
                </div>
                <div className="ext-arrow"/>
                <ExtensionPopup user={user}/>
              </div>
            </div>
          </div>

          {/* Right side: install status + settings */}
          <div className="col" style={{ gap: 14 }}>
            <span className="eyebrow">INSTALL STATUS</span>
            <div className="card card-pad" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                { k: "chrome",  el: <Browser.Chrome/>,  name: "Chrome",   status: "installed", v: "v0.4.1" },
                { k: "firefox", el: <Browser.Firefox/>, name: "Firefox",  status: "installed", v: "v0.4.1" },
                { k: "edge",    el: <Browser.Edge/>,    name: "Edge",     status: "not_installed" },
                { k: "safari",  el: <Browser.Safari/>,  name: "Safari",   status: "not_installed" },
              ].map(b => (
                <div key={b.k} className="ext-install-row">
                  <div className="row" style={{ gap: 10 }}>
                    {b.el}
                    <div className="col" style={{ gap: 0 }}>
                      <span style={{ fontSize: 13, fontWeight: 600 }}>{b.name}</span>
                      {b.status === "installed"
                        ? <span className="mono dim" style={{ fontSize: 10.5 }}>{b.v} · synced 2m ago</span>
                        : <span className="dim" style={{ fontSize: 10.5 }}>Not installed</span>
                      }
                    </div>
                  </div>
                  {b.status === "installed"
                    ? <span className="pill green dot"><span className="dot"/>Active</span>
                    : <button className="btn sm">Install <I.Open/></button>
                  }
                </div>
              ))}
            </div>

            <span className="eyebrow" style={{ marginTop: 6 }}>EXTENSION SETTINGS</span>
            <div className="card" style={{ overflow: "hidden" }}>
              {[
                { k: "detect",   l: "Auto-detect addresses on every page",     d: "Underlines addresses on websites you visit", on: true },
                { k: "sidebar",  l: "Sidebar on LinkedIn / ZoomInfo / Apollo / CoStar", d: "Auto-opens on supported sites",       on: true },
                { k: "rclick",   l: "Right-click menu lookup",                  d: "Adds 'Look up in ContactIQ' to your selection menu", on: true },
                { k: "history",  l: "Save lookups to my account",               d: "Searchable, taggable, exportable in your dashboard", on: true },
                { k: "incognito",l: "Run in private browsing windows",          d: "Lookups in private mode are NOT saved", on: false },
              ].map(s => <ExtSetting key={s.k} {...s}/>)}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function ExtSetting({ l, d, on: initOn }) {
  const [on, setOn] = useState(initOn);
  return (
    <div className="ext-setting">
      <div className="col" style={{ gap: 2, flex: 1 }}>
        <span style={{ fontSize: 12.5, fontWeight: 500 }}>{l}</span>
        <span className="dim" style={{ fontSize: 11 }}>{d}</span>
      </div>
      <button className={"toggle " + (on ? "on" : "")} onClick={() => setOn(!on)}>
        <span className="toggle-knob"/>
      </button>
    </div>
  );
}

/* ── The actual popup (360×580) ──────────────────────────────────── */
function ExtensionPopup({ user }) {
  const { LOOKUPS } = window.CONTACTIQ_DATA;
  const recent = LOOKUPS.slice(0, 4);

  return (
    <div className="ext-popup">
      {/* Popup header */}
      <div className="ext-popup-head">
        <Logo size="md"/>
        <div className="row tight">
          <button className="btn icon sm" title="Settings"><I.Gear/></button>
        </div>
      </div>

      {/* On this page detection */}
      <div className="ext-popup-detect">
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
          <span className="eyebrow">ON THIS PAGE</span>
          <span className="pill green dot"><span className="dot"/>Detected</span>
        </div>
        <div className="ext-popup-card">
          <div className="row" style={{ gap: 10 }}>
            <I.Pin style={{ color: "var(--accent)", flexShrink: 0 }}/>
            <div className="col" style={{ gap: 1, flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 12.5 }}>Sterling &amp; Wright LLP</div>
              <div className="mono dim" style={{ fontSize: 10.5 }}>350 5th Ave, Fl 64 · NYC</div>
              <div className="row tight" style={{ marginTop: 4 }}>
                <span className="pill" style={{ fontSize: 9, padding: "1px 6px", color: "var(--src-attorney)", background: "rgba(15,118,110,0.08)", borderColor: "rgba(15,118,110,0.2)" }}>Legal</span>
                <span className="pill" style={{ fontSize: 9, padding: "1px 6px" }}>22 attorneys</span>
                <span className="pill green" style={{ fontSize: 9, padding: "1px 6px" }}>Active</span>
              </div>
            </div>
          </div>
        </div>
        <button className="btn primary sm full" style={{ marginTop: 8 }}>
          Open in ContactIQ <I.Open/>
        </button>
      </div>

      <div className="ext-popup-divider"/>

      {/* Quick search */}
      <div className="ext-popup-sec">
        <span className="eyebrow">QUICK LOOKUP</span>
        <input className="input search sm" style={{ marginTop: 6 }} placeholder="Address, company, parcel ID…"/>
      </div>

      <div className="ext-popup-divider"/>

      {/* Recent */}
      <div className="ext-popup-sec ext-popup-recent">
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
          <span className="eyebrow">RECENT</span>
          <a className="dim" style={{ fontSize: 10.5, cursor: "pointer" }}>View all</a>
        </div>
        <div className="col" style={{ gap: 2 }}>
          {recent.map(l => (
            <div key={l.id} className="ext-recent-row">
              {l.type === "building"
                ? <I.Bldg style={{ color: "var(--src-business)" }}/>
                : <I.Co style={{ color: "var(--src-attorney)" }}/>}
              <div className="col" style={{ gap: 0, flex: 1, minWidth: 0 }}>
                <span style={{ fontSize: 11.5, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{l.name}</span>
                <span className="dim mono" style={{ fontSize: 9.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{l.sub}</span>
              </div>
              <span className="mono dim" style={{ fontSize: 9.5, flexShrink: 0 }}>{l.ts.slice(5, 10)}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Footer */}
      <div className="ext-popup-foot">
        <div className="row" style={{ gap: 8 }}>
          <Avatar name={user.name} size="sm"/>
          <div className="col" style={{ gap: 0, minWidth: 0, flex: 1 }}>
            <span style={{ fontSize: 11, fontWeight: 600 }}>{user.name}</span>
            <span className="mono dim" style={{ fontSize: 9.5 }}>{user.email}</span>
          </div>
          <span className="pill accent" style={{ fontSize: 9 }}>Trial · 13d</span>
        </div>
      </div>
    </div>
  );
}

window.ExtensionPage = ExtensionPage;