/* Calibrated Ascension HQ — Connect environment wizard (GitHub · Vercel · Plugins). */
const { useState: useO, useEffect: useOE, useRef: useORef } = React;

const slugify = (n) => (n || "client").toLowerCase().replace(/&/g, "and").replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "").slice(0, 18);

const PLUGINS = [
  { id: "ghl", name: "GoHighLevel", desc: "Funnels, contacts & workflows", ico: "plug", on: true },
  { id: "stripe", name: "Stripe", desc: "Payments & subscriptions", ico: "card", on: true },
  { id: "drive", name: "Google Drive", desc: "Docs & shared files", ico: "drive", on: true },
  { id: "ga4", name: "Analytics (GA4)", desc: "Traffic & conversion data", ico: "traffic", on: false },
  { id: "resend", name: "Resend", desc: "Transactional email", ico: "mail", on: false },
  { id: "slack", name: "Slack", desc: "Alerts & approvals", ico: "chat", on: false },
  { id: "meta", name: "Meta Ads", desc: "Ad spend & creative", ico: "bolt", on: false },
  { id: "webhooks", name: "Webhooks", desc: "Custom event triggers", ico: "flow", on: false },
];

function ConnectEnvModal({ client, initial, onClose, onComplete }) {
  const slug = slugify(client.name);
  const seed = initial || {};
  const [step, setStep] = useO(0);

  // GitHub
  const [ghState, setGhState] = useO(seed.github ? "connected" : "idle"); // idle | connecting | connected
  const [repo, setRepo] = useO(seed.repo || null);
  const REPOS = [
    { name: `${slug}/web`, note: "Marketing site · Next.js", tag: "main" },
    { name: `${slug}/funnel-app`, note: "Offer funnels & checkout", tag: "main" },
    { name: `${slug}/landing-experiments`, note: "A/B landing variants", tag: "main" },
  ];

  // Vercel
  const [vcState, setVcState] = useO(seed.vercel ? "connected" : "idle");
  const [project, setProject] = useO(seed.project || null);
  const [domain, setDomain] = useO(seed.domain || `${slug}.vercel.app`);
  const PROJECTS = [
    { name: `${slug}-web`, note: "Production · auto-deploys from main", tag: "prod" },
    { name: `${slug}-funnel`, note: "Preview deploys on every PR", tag: "preview" },
  ];

  // Plugins
  const [plugins, setPlugins] = useO(() => {
    if (seed.plugins) return new Set(seed.plugins);
    return new Set(PLUGINS.filter((p) => p.on).map((p) => p.id));
  });
  function togglePlugin(id) {
    setPlugins((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
  }

  function connect(setter) {
    setter("connecting");
    setTimeout(() => setter("connected"), 950);
  }

  const steps = ["GitHub", "Vercel", "Plugins", "Review"];
  const stepState = (i) => (i < step ? "done" : i === step ? "active" : "");
  const canNext = () => {
    if (step === 0) return ghState === "connected" && repo;
    if (step === 1) return vcState === "connected" && project;
    if (step === 2) return plugins.size > 0;
    return true;
  };

  function finish() {
    onComplete({
      done: true,
      github: ghState === "connected",
      repo, vercel: vcState === "connected",
      project, domain,
      plugins: [...plugins],
    });
  }

  const selectedPlugins = PLUGINS.filter((p) => plugins.has(p.id));

  return (
    <div className="ov" onClick={onClose}>
      <div className="sheet wz fade" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-h">
          <span className="client-badge" style={{ width: 38, height: 38, background: client.color }}>{client.initials}</span>
          <div style={{ flex: 1 }}>
            <div className="sheet-title">Connect {client.name}'s environment</div>
            <div className="sheet-sub">Give the agents a scoped, production-safe place to ship.</div>
          </div>
          <button className="x-btn" onClick={onClose}>{I.x}</button>
        </div>

        <div className="wz-steps">
          {steps.map((s, i) => (
            <div key={s} className="wz-step" data-state={stepState(i)}>
              <span className="wz-num">{i < step ? I.check : i + 1}</span>
              <span className="wz-lbl">{s}</span>
            </div>
          ))}
        </div>

        <div className="wz-body">
          {step === 0 && (
            <React.Fragment>
              <div className="wz-h">Connect GitHub</div>
              <div className="wz-sub">Authorize the agency's GitHub App on {client.name}'s organization. The agents read and open pull requests — they never push straight to production.</div>
              <div className="svc" data-on={ghState === "connected"}>
                <div className="svc-tile gh">{I.gitbranch}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="svc-name">GitHub</div>
                  <div className="svc-meta">{ghState === "connected" ? <span><b>{slug}</b> org · 3 repositories authorized</span> : "Repository access · pull requests · checks"}</div>
                </div>
                <div className="svc-status">
                  {ghState === "connected"
                    ? <span className="svc-chk">{I.check} Connected</span>
                    : <button className="btn btn-primary btn-sm" onClick={() => connect(setGhState)} disabled={ghState === "connecting"}>
                        {ghState === "connecting" ? <React.Fragment><span className="spin"></span> Authorizing…</React.Fragment> : <React.Fragment>{I.lock} Authorize</React.Fragment>}
                      </button>}
                </div>
              </div>
              {ghState === "connected" && (
                <div className="pick">
                  <div className="pick-h">{I.repo} Choose the repository agents work in</div>
                  {REPOS.map((r) => (
                    <button key={r.name} className="pick-row" data-sel={repo === r.name} onClick={() => setRepo(r.name)}>
                      <span className="pick-radio"></span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div className="pick-name">{r.name}</div>
                        <div className="pick-note">{r.note}</div>
                      </div>
                      <span className="pick-tag">{r.tag}</span>
                    </button>
                  ))}
                </div>
              )}
            </React.Fragment>
          )}

          {step === 1 && (
            <React.Fragment>
              <div className="wz-h">Connect Vercel</div>
              <div className="wz-sub">Link the Vercel project so previews and production deploys are wired to the repo. Every approval you give ships through here.</div>
              <div className="svc" data-on={vcState === "connected"}>
                <div className="svc-tile vc">{I.triangle}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="svc-name">Vercel</div>
                  <div className="svc-meta">{vcState === "connected" ? <span>Team <b>{slug}</b> · linked to {repo || "repo"}</span> : "Preview & production deployments"}</div>
                </div>
                <div className="svc-status">
                  {vcState === "connected"
                    ? <span className="svc-chk">{I.check} Connected</span>
                    : <button className="btn btn-primary btn-sm" onClick={() => connect(setVcState)} disabled={vcState === "connecting"}>
                        {vcState === "connecting" ? <React.Fragment><span className="spin"></span> Linking…</React.Fragment> : <React.Fragment>{I.link} Connect</React.Fragment>}
                      </button>}
                </div>
              </div>
              {vcState === "connected" && (
                <React.Fragment>
                  <div className="pick">
                    <div className="pick-h">{I.rocket} Deploy target</div>
                    {PROJECTS.map((p) => (
                      <button key={p.name} className="pick-row" data-sel={project === p.name} onClick={() => setProject(p.name)}>
                        <span className="pick-radio"></span>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div className="pick-name">{p.name}</div>
                          <div className="pick-note">{p.note}</div>
                        </div>
                        <span className="pick-tag">{p.tag}</span>
                      </button>
                    ))}
                  </div>
                  <div className="field" style={{ margin: "16px 0 0" }}>
                    <label>Production domain</label>
                    <input value={domain} onChange={(e) => setDomain(e.target.value)} />
                  </div>
                </React.Fragment>
              )}
            </React.Fragment>
          )}

          {step === 2 && (
            <React.Fragment>
              <div className="wz-h">Enable plugins</div>
              <div className="wz-sub">Pick the integrations the agents can use inside this account. You can change these anytime from the account's environment settings.</div>
              <div className="plug-grid">
                {PLUGINS.map((p) => (
                  <button key={p.id} className="plug-card" data-on={plugins.has(p.id)} onClick={() => togglePlugin(p.id)}>
                    <span className="plug-ico">{I[p.ico]}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="plug-n">{p.name}</div>
                      <div className="plug-d">{p.desc}</div>
                    </div>
                    <span className="plug-check">{plugins.has(p.id) && I.check}</span>
                  </button>
                ))}
              </div>
            </React.Fragment>
          )}

          {step === 3 && (
            <React.Fragment>
              <div className="wz-h">Review &amp; grant access</div>
              <div className="wz-sub">This becomes {client.name}'s scoped environment. Agents operate only inside it — and only ship what you approve.</div>
              <div className="wz-review">
                <div className="rv-row">
                  <span className="rv-ico" style={{ background: "oklch(0.22 0.01 260)" }}>{I.gitbranch}</span>
                  <div style={{ flex: 1, minWidth: 0 }}><div className="rv-k">GitHub repository</div><div className="rv-v mono">{repo}</div></div>
                  <span className="svc-chk">{I.check}</span>
                </div>
                <div className="rv-row">
                  <span className="rv-ico" style={{ background: "oklch(0.16 0 0)" }}>{I.triangle}</span>
                  <div style={{ flex: 1, minWidth: 0 }}><div className="rv-k">Vercel deploy · domain</div><div className="rv-v mono">{project} · {domain}</div></div>
                  <span className="svc-chk">{I.check}</span>
                </div>
                <div className="rv-row">
                  <span className="rv-ico" style={{ background: "linear-gradient(150deg, var(--accent), var(--accent-strong))" }}>{I.plug}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="rv-k">{selectedPlugins.length} plugins enabled</div>
                    <div className="rv-v">{selectedPlugins.map((p) => p.name).join(" · ")}</div>
                  </div>
                </div>
              </div>
              <div className="wz-grant">{I.shield} Agents get a read-first, branch-and-PR workflow. Production deploys stay gated behind your approval, and access is revoked the moment this account goes dormant.</div>
            </React.Fragment>
          )}
        </div>

        <div className="wz-foot">
          {step > 0
            ? <button className="btn btn-ghost" onClick={() => setStep((s) => s - 1)}>Back</button>
            : <button className="btn btn-ghost" onClick={onClose}>Cancel</button>}
          <span className="grow"></span>
          <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)" }}>Step {step + 1} / {steps.length}</span>
          {step < 3
            ? <button className="btn btn-primary" disabled={!canNext()} onClick={() => setStep((s) => s + 1)}>Continue {I.send}</button>
            : <button className="btn btn-primary" onClick={finish}>{I.shield} Grant access &amp; finish</button>}
        </div>
      </div>
    </div>
  );
}