const _RB_API = "https://api.usegreenroom.app";

// Outside component — prevents focus loss on re-render
function RBField({ label, value, onChange, placeholder, type = "text", required, inputStyle, labelStyle }) {
  return (
    <div>
      <label style={labelStyle}>{label}{required && <span style={{ color: "#dc2626", marginLeft: 2 }}>*</span>}</label>
      <input type={type} value={value} onChange={e => onChange(e.target.value)}
        placeholder={placeholder} style={inputStyle} />
    </div>
  );
}

function ResumeBuilder({ token, jobContext = {}, subscriptionPlan = "free", onUpgrade, darkMode = false }) {
  // Payments hidden: when there is no upgrade path, treat everyone as Pro so
  // they can use the resume builder instead of staring at a locked CTA.
  const isPro = subscriptionPlan !== "free" || !onUpgrade;

  const [tab, setTab]             = React.useState("info");
  const [repos, setRepos]         = React.useState([]);
  const [githubConnected, setGithubConnected] = React.useState(false);
  const [selected, setSelected]   = React.useState(new Set());
  const [bullets, setBullets]     = React.useState({});
  const [manualProjects, setManualProjects] = React.useState([{ name: "", language: "", description: "", bullets: ["", ""] }]);
  const [useManualProjects, setUseManualProjects] = React.useState(false);
  const [loadingRepos, setLoadingRepos]           = React.useState(false);
  const [generatingBullets, setGeneratingBullets] = React.useState(false);
  const [generatingResume, setGeneratingResume]   = React.useState(false);
  const [resumeHtml, setResumeHtml] = React.useState(null);
  const [error, setError]           = React.useState("");
  const [validationErrors, setValidationErrors] = React.useState([]);

  // ── Info mode: "paste" | "pdf" | "manual" ──────────────────────────────────
  const [infoMode, setInfoMode]       = React.useState(null);  // null = not chosen yet
  const [existingResume, setExistingResume] = React.useState("");
  const [pdfUploading, setPdfUploading]     = React.useState(false);
  const [pdfFileName, setPdfFileName]       = React.useState("");

  const [info, setInfo] = React.useState({
    name: "", email: "", phone: "", linkedin: "", location: "",
    role: jobContext?.role || "",
  });
  const [experience, setExperience] = React.useState([{ title: "", company: "", dates: "", bullets: ["", ""] }]);
  const [education, setEducation]   = React.useState([{ degree: "", school: "", year: "" }]);

  const T = darkMode ? {
    bg: "#151618", surface: "rgba(255,255,255,.05)", border: "rgba(255,255,255,.08)",
    text1: "#f3f4f6", text2: "#b0b5be", text3: "#7d838e",
    input: "rgba(255,255,255,.04)", inputBorder: "rgba(255,255,255,.1)",
    warn: "rgba(220,38,38,.12)", warnBorder: "rgba(220,38,38,.3)",
  } : {
    bg: "#f4f5f7", surface: "#fff", border: "rgba(0,0,0,.08)",
    text1: "#0a0a0b", text2: "#52525b", text3: "#a1a1aa",
    input: "#f9f9f8", inputBorder: "rgba(0,0,0,.10)",
    warn: "rgba(220,38,38,.06)", warnBorder: "rgba(220,38,38,.2)",
  };

  const inputStyle = {
    width: "100%", padding: "9px 12px", borderRadius: 8, boxSizing: "border-box",
    border: `1px solid ${T.inputBorder}`, background: T.input,
    color: T.text1, font: "14px var(--font-sans)", outline: "none",
  };
  const labelStyle = { font: "500 12px var(--font-sans)", color: T.text3, display: "block", marginBottom: 5 };
  const fieldProps  = { inputStyle, labelStyle };

  // ── Load repos ──────────────────────────────────────────────────────────────
  React.useEffect(() => {
    if (!token || !isPro) return;
    setLoadingRepos(true);
    fetch(`${_RB_API}/api/profile/job`, { headers: { Authorization: `Bearer ${token}` } })
      .then(r => r.json())
      .then(data => {
        const ghRepos = (data?.githubTopRepos || []).map(r => ({
          name: r.name || r.repo || "", language: r.language || "", description: r.description || "",
        })).filter(r => r.name);
        setRepos(ghRepos);
        setGithubConnected(ghRepos.length > 0);
        setSelected(new Set(ghRepos.slice(0, 3).map(r => r.name)));
        if (!ghRepos.length) setUseManualProjects(true);
      })
      .catch(() => setUseManualProjects(true))
      .finally(() => setLoadingRepos(false));
  }, [token, isPro]);

  // ── Helpers ─────────────────────────────────────────────────────────────────
  function setInfoField(k, v) { setInfo(prev => ({ ...prev, [k]: v })); }

  function addExp() { setExperience(p => [...p, { title: "", company: "", dates: "", bullets: ["", ""] }]); }
  function removeExp(i) { setExperience(p => p.filter((_, idx) => idx !== i)); }
  function setExpField(i, k, v) { setExperience(p => p.map((e, idx) => idx === i ? { ...e, [k]: v } : e)); }
  function setExpBullet(i, bi, v) {
    setExperience(p => p.map((e, idx) => { if (idx !== i) return e; const b = [...e.bullets]; b[bi] = v; return { ...e, bullets: b }; }));
  }

  function addEdu() { setEducation(p => [...p, { degree: "", school: "", year: "" }]); }
  function removeEdu(i) { setEducation(p => p.filter((_, idx) => idx !== i)); }
  function setEduField(i, k, v) { setEducation(p => p.map((e, idx) => idx === i ? { ...e, [k]: v } : e)); }

  function addManualProject() { setManualProjects(p => [...p, { name: "", language: "", description: "", bullets: ["", ""] }]); }
  function removeManualProject(i) { setManualProjects(p => p.filter((_, idx) => idx !== i)); }
  function setManualProjectField(i, k, v) { setManualProjects(p => p.map((e, idx) => idx === i ? { ...e, [k]: v } : e)); }
  function setManualProjectBullet(i, bi, v) {
    setManualProjects(p => p.map((e, idx) => { if (idx !== i) return e; const b = [...e.bullets]; b[bi] = v; return { ...e, bullets: b }; }));
  }

  function toggleRepo(name) {
    setSelected(prev => { const n = new Set(prev); n.has(name) ? n.delete(name) : n.add(name); return n; });
  }

  async function handlePdfUpload(e) {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.type !== "application/pdf") { setError("Please upload a PDF file."); return; }
    setPdfUploading(true); setPdfFileName(file.name); setError("");
    try {
      const form = new FormData();
      form.append("file", file);
      const res = await fetch(`${_RB_API}/api/resume/parse-pdf`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
        body: form,
      });
      const data = await res.json();
      if (!res.ok) { setError(data.error || "Could not read PDF."); return; }
      setExistingResume(data.text);
    } catch { setError("Upload failed. Try pasting the text instead."); }
    finally { setPdfUploading(false); }
  }

  // ── Validation ──────────────────────────────────────────────────────────────
  function validate() {
    const errs = [];
    if (!info.role.trim()) errs.push("Target role is required");

    // For paste/pdf mode only need existing resume text
    if (infoMode === "paste" || infoMode === "pdf") {
      if (!existingResume.trim()) errs.push("Paste your resume text or upload a PDF first");
    } else {
      // Manual mode needs name + email
      if (!info.name.trim()) errs.push("Full name is required");
      if (!info.email.trim()) errs.push("Email is required");
    }

    if (!useManualProjects) {
      if (selected.size === 0) errs.push("Select at least one GitHub repo in the Projects tab");
      else if (Object.keys(bullets).length === 0) errs.push("Generate bullets for your GitHub repos before building the resume");
    } else {
      if (!manualProjects.some(p => p.name.trim())) errs.push("Add at least one project in the Projects tab");
    }
    return errs;
  }

  // ── Generate bullets ─────────────────────────────────────────────────────────
  async function generateBullets() {
    if (!info.role.trim()) { setError("Enter target role first."); return; }
    const chosenRepos = repos.filter(r => selected.has(r.name));
    if (!chosenRepos.length) { setError("Select at least one repo."); return; }
    setError(""); setGeneratingBullets(true);
    try {
      const res = await fetch(`${_RB_API}/api/resume/generate`, {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({ role: info.role.trim(), repos: chosenRepos }),
      });
      const data = await res.json();
      if (!res.ok) { if (data.upgrade) { onUpgrade?.("pro"); return; } setError(data.error || "Failed."); return; }
      const map = {};
      (data.bullets || []).forEach(b => { map[b.repo] = b.bullets || []; });
      setBullets(map);
    } catch { setError("Network error."); }
    finally { setGeneratingBullets(false); }
  }

  // ── Generate full resume ──────────────────────────────────────────────────────
  async function generateFullResume() {
    const errs = validate();
    if (errs.length) { setValidationErrors(errs); setTab("info"); return; }
    setValidationErrors([]); setError(""); setGeneratingResume(true); setResumeHtml(null); setTab("resume");

    const projectsPayload = useManualProjects
      ? manualProjects.filter(p => p.name.trim()).map(p => ({ ...p, bullets: p.bullets.filter(b => b.trim()) }))
      : repos.filter(r => selected.has(r.name)).map(r => ({ ...r, bullets: bullets[r.name] || [] }));

    try {
      const res = await fetch(`${_RB_API}/api/resume/full`, {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({
          name: info.name, email: info.email, phone: info.phone,
          linkedin: info.linkedin, location: info.location,
          role: info.role,
          existingResume: (infoMode === "paste" || infoMode === "pdf") ? existingResume : "",
          experience: infoMode === "manual" ? experience.filter(e => e.title || e.company) : [],
          education:  infoMode === "manual" ? education.filter(e => e.degree || e.school)  : [],
          repos: projectsPayload,
        }),
      });
      const data = await res.json();
      if (!res.ok) { if (data.upgrade) { onUpgrade?.("pro"); return; } setError(data.error || "Generation failed."); return; }
      setResumeHtml(data.html);
    } catch { setError("Network error. Please try again."); }
    finally { setGeneratingResume(false); }
  }

  function downloadPdf() {
    const win = window.open("", "_blank");
    win.document.write(resumeHtml);
    win.document.close();
    setTimeout(() => { win.focus(); win.print(); }, 500);
  }

  // ── Pro gate ──────────────────────────────────────────────────────────────────
  if (!isPro) return (
    <div data-screen-label="Resume builder" style={{ minHeight: "100vh", background: T.bg, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 20, padding: 40, textAlign: "center" }}>
      <div style={{ width: 64, height: 64, borderRadius: 16, background: "var(--bg-brand-soft)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name="file-text" size={28} color="var(--gr-green-500)" />
      </div>
      <div style={{ font: "400 26px/1.15 var(--font-display)", letterSpacing: "-.02em", color: T.text1 }}>Full resume builder</div>
      <div style={{ font: "14px/1.7 var(--font-sans)", color: T.text2, maxWidth: 440 }}>
        Ari reads your GitHub repos, writes the bullet points, and assembles a FAANG-style ready-to-send resume. Download as PDF in one click.
      </div>
      <button onClick={() => onUpgrade?.("pro")} style={{ padding: "12px 28px", borderRadius: 10, border: "none", cursor: "pointer", background: "var(--gr-green-500)", color: "#fff", font: "600 15px var(--font-sans)" }}>
        Upgrade to Pro — $15/mo
      </button>
    </div>
  );

  const TABS = [
    { id: "info",     label: "Your info" },
    { id: "projects", label: "Projects" },
    { id: "resume",   label: "Resume" },
  ];

  return (
    <div data-screen-label="Resume builder" style={{ minHeight: "100vh", background: T.bg }}>

      {/* Header */}
      <header style={{ padding: "18px 32px", borderBottom: `1px solid ${T.border}`, background: T.surface, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
        <div>
          <div style={{ font: "600 20px var(--font-sans)", letterSpacing: "-.015em", color: T.text1 }}>Resume builder</div>
          <div style={{ font: "12px var(--font-sans)", color: T.text3, marginTop: 1 }}>FAANGPath style · Mistral Small · Pro</div>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          {resumeHtml && (
            <button onClick={downloadPdf} style={{ padding: "9px 18px", borderRadius: 9, border: "none", cursor: "pointer", background: "var(--gr-green-500)", color: "#fff", font: "600 13px var(--font-sans)", display: "flex", alignItems: "center", gap: 7 }}>
              <Icon name="download" size={14} color="#fff" /> Download PDF
            </button>
          )}
          <button onClick={generateFullResume} disabled={generatingResume} style={{ padding: "9px 18px", borderRadius: 9, border: `1px solid ${T.border}`, background: T.surface, cursor: generatingResume ? "not-allowed" : "pointer", color: T.text1, font: "500 13px var(--font-sans)", opacity: generatingResume ? 0.5 : 1 }}>
            {generatingResume ? "Building…" : "Generate resume"}
          </button>
        </div>
      </header>

      {/* Tabs */}
      <div style={{ display: "flex", borderBottom: `1px solid ${T.border}`, background: T.surface, padding: "0 32px" }}>
        {TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{ padding: "12px 18px", border: "none", background: "none", cursor: "pointer", font: `${tab === t.id ? "600" : "500"} 13px var(--font-sans)`, color: tab === t.id ? "var(--gr-green-600)" : T.text3, borderBottom: tab === t.id ? "2px solid var(--gr-green-500)" : "2px solid transparent", marginBottom: -1 }}>
            {t.label}
          </button>
        ))}
      </div>

      {/* Validation errors */}
      {validationErrors.length > 0 && (
        <div style={{ margin: "16px 32px 0", padding: "12px 16px", borderRadius: 10, background: T.warn, border: `1px solid ${T.warnBorder}` }}>
          <div style={{ font: "600 12px var(--font-sans)", color: "#dc2626", marginBottom: 6 }}>Fix these before generating:</div>
          {validationErrors.map((e, i) => <div key={i} style={{ font: "13px var(--font-sans)", color: "#dc2626" }}>— {e}</div>)}
        </div>
      )}

      {error && (
        <div style={{ margin: "12px 32px 0", padding: "10px 14px", borderRadius: 8, background: T.warn, border: `1px solid ${T.warnBorder}`, font: "13px var(--font-sans)", color: "#dc2626" }}>{error}</div>
      )}

      {/* ── Tab: Info ─────────────────────────────────────────────────────────── */}
      {tab === "info" && (
        <main style={{ padding: "28px 32px", maxWidth: 720, margin: "0 auto", display: "flex", flexDirection: "column", gap: 20 }}>

          {/* Target role — always required */}
          <div style={{ padding: 20, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 14 }}>
            <RBField label="Target role *" value={info.role} onChange={v => setInfoField("role", v)} placeholder="Senior Software Engineer" required {...fieldProps} />
          </div>

          {/* Mode picker */}
          {!infoMode && (
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ font: "500 13px var(--font-sans)", color: T.text2 }}>How do you want to provide your information?</div>
              {[
                { id: "paste", icon: "📋", title: "Paste existing resume", sub: "Copy-paste your current resume — Ari will rewrite it to FAANG level" },
                { id: "pdf",   icon: "📄", title: "Upload PDF",            sub: "Upload your resume PDF — we'll extract the text and rebuild it" },
                { id: "manual",icon: "✏️", title: "Fill in manually",      sub: "No resume yet? Enter your details and we'll build one from scratch" },
              ].map(opt => (
                <button key={opt.id} onClick={() => setInfoMode(opt.id)} style={{
                  display: "flex", alignItems: "center", gap: 16, padding: "18px 20px",
                  borderRadius: 12, border: `1.5px solid ${T.border}`, background: T.surface,
                  cursor: "pointer", textAlign: "left", transition: "border-color 130ms",
                }}
                  onMouseEnter={e => e.currentTarget.style.borderColor = "var(--gr-green-400)"}
                  onMouseLeave={e => e.currentTarget.style.borderColor = T.border}
                >
                  <span style={{ fontSize: 24, flexShrink: 0 }}>{opt.icon}</span>
                  <div>
                    <div style={{ font: "600 14px var(--font-sans)", color: T.text1, marginBottom: 3 }}>{opt.title}</div>
                    <div style={{ font: "13px var(--font-sans)", color: T.text3 }}>{opt.sub}</div>
                  </div>
                  <svg style={{ marginLeft: "auto", flexShrink: 0 }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={T.text3} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </button>
              ))}
            </div>
          )}

          {/* Mode: Paste text */}
          {infoMode === "paste" && (
            <div style={{ padding: 20, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 14, display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div>
                  <div style={{ font: "600 13px var(--font-sans)", color: T.text1 }}>Paste your resume</div>
                  <div style={{ font: "12px var(--font-sans)", color: T.text3, marginTop: 2 }}>Copy everything — name, contact, experience, education, skills</div>
                </div>
                <button onClick={() => { setInfoMode(null); setExistingResume(""); }} style={{ font: "12px var(--font-sans)", color: T.text3, background: "none", border: "none", cursor: "pointer" }}>← Change</button>
              </div>
              <textarea
                value={existingResume}
                onChange={e => setExistingResume(e.target.value)}
                placeholder={"Alex Chen\nalex.chen@example.com | +1 555 123 4567\n\nExperience\nSoftware Engineer · Stripe · 2022–Present\n• Built payment routing system...\n\nEducation\nB.Tech Computer Science · IIT Madras · 2022\n\nSkills\nGo, Python, React, PostgreSQL..."}
                rows={14}
                style={{ ...inputStyle, resize: "vertical", lineHeight: 1.65, font: "13px var(--font-sans)" }}
              />
              {existingResume.length > 0 && (
                <div style={{ font: "11px var(--font-sans)", color: existingResume.trim().split(/\s+/).length > 100 ? "var(--gr-green-600)" : T.text3 }}>
                  {existingResume.trim().split(/\s+/).filter(Boolean).length} words
                  {existingResume.trim().split(/\s+/).length > 100 ? " ✓ Good" : " — paste more for better output"}
                </div>
              )}
            </div>
          )}

          {/* Mode: PDF upload */}
          {infoMode === "pdf" && (
            <div style={{ padding: 20, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 14, display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div>
                  <div style={{ font: "600 13px var(--font-sans)", color: T.text1 }}>Upload resume PDF</div>
                  <div style={{ font: "12px var(--font-sans)", color: T.text3, marginTop: 2 }}>We'll extract the text and convert it to FAANG level</div>
                </div>
                <button onClick={() => { setInfoMode(null); setExistingResume(""); setPdfFileName(""); }} style={{ font: "12px var(--font-sans)", color: T.text3, background: "none", border: "none", cursor: "pointer" }}>← Change</button>
              </div>

              <label style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, padding: 32, borderRadius: 10, border: `2px dashed ${T.inputBorder}`, cursor: "pointer", background: T.input, transition: "border-color 130ms" }}
                onDragOver={e => e.preventDefault()}
                onDrop={e => { e.preventDefault(); const f = e.dataTransfer.files[0]; if (f) handlePdfUpload({ target: { files: [f] } }); }}
              >
                <input type="file" accept=".pdf" onChange={handlePdfUpload} style={{ display: "none" }} />
                {pdfUploading ? (
                  <>
                    <div style={{ width: 20, height: 20, borderRadius: 99, border: "2px solid var(--gr-green-200)", borderTopColor: "var(--gr-green-500)", animation: "spin 700ms linear infinite" }} />
                    <div style={{ font: "13px var(--font-sans)", color: T.text3 }}>Reading PDF…</div>
                  </>
                ) : pdfFileName ? (
                  <>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--gr-green-500)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    <div style={{ font: "500 13px var(--font-sans)", color: "var(--gr-green-600)" }}>{pdfFileName} — extracted ✓</div>
                    <div style={{ font: "11px var(--font-sans)", color: T.text3 }}>{existingResume.trim().split(/\s+/).filter(Boolean).length} words extracted</div>
                  </>
                ) : (
                  <>
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={T.text3} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="13" x2="12" y2="17"/><line x1="10" y1="15" x2="14" y2="15"/></svg>
                    <div style={{ font: "500 13px var(--font-sans)", color: T.text2 }}>Click to upload or drag & drop</div>
                    <div style={{ font: "11px var(--font-sans)", color: T.text3 }}>PDF only · Max 10MB</div>
                  </>
                )}
              </label>

              {pdfFileName && existingResume && (
                <details style={{ font: "12px var(--font-sans)", color: T.text3 }}>
                  <summary style={{ cursor: "pointer" }}>Preview extracted text</summary>
                  <pre style={{ marginTop: 8, padding: 12, background: T.input, borderRadius: 8, fontSize: 11, whiteSpace: "pre-wrap", maxHeight: 200, overflow: "auto" }}>{existingResume.slice(0, 800)}{existingResume.length > 800 ? "\n…" : ""}</pre>
                </details>
              )}
            </div>
          )}

          {/* Mode: Manual */}
          {infoMode === "manual" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{ font: "600 13px var(--font-sans)", color: T.text1 }}>Your details</div>
                <button onClick={() => setInfoMode(null)} style={{ font: "12px var(--font-sans)", color: T.text3, background: "none", border: "none", cursor: "pointer" }}>← Change</button>
              </div>

              {/* Personal info */}
              <div style={{ padding: 18, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 12, display: "flex", flexDirection: "column", gap: 12 }}>
                <div style={{ font: "600 12px var(--font-sans)", color: T.text2, textTransform: "uppercase", letterSpacing: ".06em" }}>Personal</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  <RBField label="Full name *" required value={info.name} onChange={v => setInfoField("name", v)} placeholder="Alex Chen" {...fieldProps} />
                  <RBField label="Email *" required value={info.email} onChange={v => setInfoField("email", v)} placeholder="you@email.com" type="email" {...fieldProps} />
                  <RBField label="Phone" value={info.phone} onChange={v => setInfoField("phone", v)} placeholder="+91 98765 43210" {...fieldProps} />
                  <RBField label="Location" value={info.location} onChange={v => setInfoField("location", v)} placeholder="Bangalore, India" {...fieldProps} />
                  <RBField label="LinkedIn" value={info.linkedin} onChange={v => setInfoField("linkedin", v)} placeholder="linkedin.com/in/yourhandle" {...fieldProps} />
                </div>
              </div>

              {/* Work experience */}
              <div style={{ padding: 18, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 12, display: "flex", flexDirection: "column", gap: 12 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <div style={{ font: "600 12px var(--font-sans)", color: T.text2, textTransform: "uppercase", letterSpacing: ".06em" }}>Work experience</div>
                  <button onClick={addExp} style={{ font: "500 12px var(--font-sans)", color: "var(--gr-green-600)", background: "none", border: "none", cursor: "pointer" }}>+ Add role</button>
                </div>
                {experience.map((exp, i) => (
                  <div key={i} style={{ padding: 12, background: T.input, borderRadius: 9, border: `1px solid ${T.inputBorder}`, display: "flex", flexDirection: "column", gap: 9 }}>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr auto", gap: 9, alignItems: "end" }}>
                      <RBField label="Title" value={exp.title} onChange={v => setExpField(i, "title", v)} placeholder="Software Engineer" {...fieldProps} />
                      <RBField label="Company" value={exp.company} onChange={v => setExpField(i, "company", v)} placeholder="Stripe" {...fieldProps} />
                      <RBField label="Dates" value={exp.dates} onChange={v => setExpField(i, "dates", v)} placeholder="Jan 2023 – Present" {...fieldProps} />
                      {experience.length > 1 && <button onClick={() => removeExp(i)} style={{ height: 36, padding: "0 10px", borderRadius: 7, border: `1px solid ${T.inputBorder}`, background: "none", cursor: "pointer", color: T.text3 }}>✕</button>}
                    </div>
                    {exp.bullets.map((b, bi) => (
                      <div key={bi}>
                        <label style={labelStyle}>Bullet {bi + 1}</label>
                        <input value={b} onChange={e => setExpBullet(i, bi, e.target.value)} placeholder="Built X using Y, reducing Z by N%..." style={inputStyle} />
                      </div>
                    ))}
                  </div>
                ))}
              </div>

              {/* Education */}
              <div style={{ padding: 18, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 12, display: "flex", flexDirection: "column", gap: 10 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <div style={{ font: "600 12px var(--font-sans)", color: T.text2, textTransform: "uppercase", letterSpacing: ".06em" }}>Education</div>
                  <button onClick={addEdu} style={{ font: "500 12px var(--font-sans)", color: "var(--gr-green-600)", background: "none", border: "none", cursor: "pointer" }}>+ Add</button>
                </div>
                {education.map((edu, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1fr auto auto", gap: 9, alignItems: "end" }}>
                    <RBField label="Degree" value={edu.degree} onChange={v => setEduField(i, "degree", v)} placeholder="B.Tech Computer Science" {...fieldProps} />
                    <RBField label="School" value={edu.school} onChange={v => setEduField(i, "school", v)} placeholder="IIT Madras" {...fieldProps} />
                    <RBField label="Year" value={edu.year} onChange={v => setEduField(i, "year", v)} placeholder="2022" {...fieldProps} />
                    {education.length > 1 && <button onClick={() => removeEdu(i)} style={{ height: 36, padding: "0 10px", borderRadius: 7, border: `1px solid ${T.inputBorder}`, background: "none", cursor: "pointer", color: T.text3 }}>✕</button>}
                  </div>
                ))}
              </div>
            </div>
          )}

          {infoMode && (
            <button onClick={() => setTab("projects")} style={{ padding: "11px", borderRadius: 10, border: "none", cursor: "pointer", background: "var(--gr-green-500)", color: "#fff", font: "600 14px var(--font-sans)" }}>
              Next: Add projects →
            </button>
          )}
        </main>
      )}

      {/* ── Tab: Projects ─────────────────────────────────────────────────────── */}
      {tab === "projects" && (
        <main style={{ padding: "28px 32px", maxWidth: 900, margin: "0 auto", display: "flex", flexDirection: "column", gap: 20 }}>

          {/* Required notice */}
          <div style={{ padding: "12px 16px", borderRadius: 10, background: "rgba(31,122,79,.08)", border: "1px solid rgba(31,122,79,.2)", font: "13px var(--font-sans)", color: "var(--gr-green-700)" }}>
            <strong>Projects are required</strong> — they form the core of your resume. Add at least one.
          </div>

          {/* Toggle GitHub / Manual */}
          {githubConnected && (
            <div style={{ display: "flex", gap: 10 }}>
              <button onClick={() => setUseManualProjects(false)} style={{ padding: "8px 16px", borderRadius: 8, border: `1.5px solid ${!useManualProjects ? "var(--gr-green-500)" : T.border}`, background: !useManualProjects ? "var(--bg-brand-soft)" : T.surface, color: !useManualProjects ? "var(--gr-green-700)" : T.text2, font: "500 13px var(--font-sans)", cursor: "pointer" }}>
                GitHub repos
              </button>
              <button onClick={() => setUseManualProjects(true)} style={{ padding: "8px 16px", borderRadius: 8, border: `1.5px solid ${useManualProjects ? "var(--gr-green-500)" : T.border}`, background: useManualProjects ? "var(--bg-brand-soft)" : T.surface, color: useManualProjects ? "var(--gr-green-700)" : T.text2, font: "500 13px var(--font-sans)", cursor: "pointer" }}>
                Add manually
              </button>
            </div>
          )}

          {/* GitHub repos */}
          {!useManualProjects && (
            <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 20, alignItems: "start" }}>
              <div style={{ padding: 16, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 14, display: "flex", flexDirection: "column", gap: 10 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <div style={{ font: "600 13px var(--font-sans)", color: T.text1 }}>Repos</div>
                  <span style={{ font: "11px var(--font-sans)", color: T.text3 }}>{selected.size} selected</span>
                </div>
                {loadingRepos && <div style={{ font: "13px var(--font-sans)", color: T.text3 }}>Loading…</div>}
                {repos.map(r => {
                  const on = selected.has(r.name);
                  return (
                    <button key={r.name} onClick={() => toggleRepo(r.name)} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderRadius: 8, cursor: "pointer", textAlign: "left", background: on ? "var(--bg-brand-soft)" : T.input, border: `1px solid ${on ? "var(--gr-green-200)" : T.inputBorder}` }}>
                      <div style={{ width: 14, height: 14, borderRadius: 3, flexShrink: 0, border: `1.5px solid ${on ? "var(--gr-green-500)" : T.border}`, background: on ? "var(--gr-green-500)" : "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}>
                        {on && <span style={{ color: "#fff", fontSize: 9 }}>✓</span>}
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ font: "500 12px var(--font-sans)", color: T.text1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.name}</div>
                        {r.language && <div style={{ font: "10px var(--font-sans)", color: T.text3 }}>{r.language}</div>}
                      </div>
                    </button>
                  );
                })}
                <button onClick={generateBullets} disabled={generatingBullets || !selected.size || !info.role.trim()} style={{ marginTop: 4, padding: "9px", borderRadius: 8, border: "none", cursor: "pointer", background: "var(--gr-green-500)", color: "#fff", font: "600 12px var(--font-sans)", opacity: (generatingBullets || !selected.size) ? 0.5 : 1 }}>
                  {generatingBullets ? "Generating…" : "Generate bullets"}
                </button>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {!Object.keys(bullets).length && !generatingBullets && (
                  <div style={{ padding: 40, textAlign: "center", background: T.surface, border: `1px solid ${T.border}`, borderRadius: 14, font: "13px var(--font-sans)", color: T.text3 }}>
                    Select repos and click Generate bullets — then edit them if needed
                  </div>
                )}
                {generatingBullets && (
                  <div style={{ padding: 40, textAlign: "center", background: T.surface, border: `1px solid ${T.border}`, borderRadius: 14, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
                    <div style={{ width: 20, height: 20, borderRadius: 99, border: "2px solid var(--gr-green-200)", borderTopColor: "var(--gr-green-500)", animation: "spin 700ms linear infinite" }} />
                    <div style={{ font: "13px var(--font-sans)", color: T.text2 }}>Writing bullets from your repos…</div>
                  </div>
                )}
                {Object.entries(bullets).map(([repo, blist]) => (
                  <div key={repo} style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 12, overflow: "hidden" }}>
                    <div style={{ padding: "10px 16px", borderBottom: `1px solid ${T.border}`, background: darkMode ? "rgba(255,255,255,.03)" : "rgba(0,0,0,.02)" }}>
                      <span style={{ font: "600 11px var(--font-mono)", color: "var(--gr-green-600)", padding: "2px 8px", background: "var(--bg-brand-soft)", borderRadius: 5 }}>{repo}</span>
                    </div>
                    <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 8 }}>
                      {(blist || []).map((b, i) => (
                        <div key={i} style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
                          <span style={{ color: "var(--gr-green-500)", fontWeight: 700, flexShrink: 0, marginTop: 2 }}>•</span>
                          <textarea value={b} onChange={e => { setBullets(prev => { const next = { ...prev, [repo]: [...(prev[repo] || [])] }; next[repo][i] = e.target.value; return next; }); }} rows={2} style={{ ...inputStyle, resize: "vertical", flex: 1, font: "13px/1.55 var(--font-sans)" }} />
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Manual projects */}
          {useManualProjects && (
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              {manualProjects.map((proj, i) => (
                <div key={i} style={{ padding: 16, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 12, display: "flex", flexDirection: "column", gap: 10 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr auto", gap: 10, alignItems: "end" }}>
                    <RBField label="Project name" value={proj.name} onChange={v => setManualProjectField(i, "name", v)} placeholder="redis-job-queue" {...fieldProps} />
                    <RBField label="Tech / Language" value={proj.language} onChange={v => setManualProjectField(i, "language", v)} placeholder="Go, Redis" {...fieldProps} />
                    {manualProjects.length > 1 && (
                      <button onClick={() => removeManualProject(i)} style={{ height: 36, padding: "0 10px", borderRadius: 7, border: `1px solid ${T.inputBorder}`, background: "none", cursor: "pointer", color: T.text3 }}>✕</button>
                    )}
                  </div>
                  <div>
                    <label style={labelStyle}>Description (optional)</label>
                    <input value={proj.description} onChange={e => setManualProjectField(i, "description", e.target.value)} placeholder="Async job processing system built with Redis Streams..." style={inputStyle} />
                  </div>
                  {proj.bullets.map((b, bi) => (
                    <div key={bi}>
                      <label style={labelStyle}>Bullet {bi + 1}</label>
                      <input value={b} onChange={e => setManualProjectBullet(i, bi, e.target.value)} placeholder="Built and shipped X using Y, achieving Z..." style={inputStyle} />
                    </div>
                  ))}
                </div>
              ))}
              <button onClick={addManualProject} style={{ padding: "9px", borderRadius: 9, border: `1px dashed ${T.border}`, background: "none", cursor: "pointer", color: T.text3, font: "500 13px var(--font-sans)" }}>
                + Add another project
              </button>
            </div>
          )}

          <button onClick={generateFullResume} disabled={generatingResume} style={{ padding: "11px", borderRadius: 10, border: "none", cursor: "pointer", background: "var(--gr-green-500)", color: "#fff", font: "600 14px var(--font-sans)", opacity: generatingResume ? 0.5 : 1 }}>
            {generatingResume ? "Building resume…" : "Generate resume →"}
          </button>
        </main>
      )}

      {/* ── Tab: Resume ───────────────────────────────────────────────────────── */}
      {tab === "resume" && (
        <main style={{ padding: "28px 32px", display: "flex", flexDirection: "column", gap: 16 }}>
          {generatingResume && (
            <div style={{ padding: 60, textAlign: "center", background: T.surface, border: `1px solid ${T.border}`, borderRadius: 14, display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
              <div style={{ width: 28, height: 28, borderRadius: 99, border: "2.5px solid var(--gr-green-200)", borderTopColor: "var(--gr-green-500)", animation: "spin 700ms linear infinite" }} />
              <div style={{ font: "500 15px var(--font-sans)", color: T.text1 }}>Building your resume…</div>
              <div style={{ font: "13px var(--font-sans)", color: T.text3 }}>Mistral Small is writing your FAANGPath resume</div>
            </div>
          )}
          {!generatingResume && !resumeHtml && (
            <div style={{ padding: 60, textAlign: "center", background: T.surface, border: `1px solid ${T.border}`, borderRadius: 14 }}>
              <div style={{ font: "500 15px var(--font-sans)", color: T.text1, marginBottom: 8 }}>No resume yet</div>
              <div style={{ font: "13px var(--font-sans)", color: T.text3, marginBottom: 20 }}>Fill in your info and projects, then generate</div>
              <button onClick={() => setTab("info")} style={{ padding: "10px 24px", borderRadius: 9, border: "none", cursor: "pointer", background: "var(--gr-green-500)", color: "#fff", font: "600 14px var(--font-sans)" }}>
                Start from info →
              </button>
            </div>
          )}
          {resumeHtml && (
            <div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <div style={{ font: "500 13px var(--font-sans)", color: T.text2 }}>Preview — Download PDF to save</div>
                <div style={{ display: "flex", gap: 10 }}>
                  <button onClick={generateFullResume} style={{ padding: "7px 14px", borderRadius: 8, border: `1px solid ${T.border}`, background: T.input, color: T.text2, font: "500 12px var(--font-sans)", cursor: "pointer" }}>
                    Regenerate
                  </button>
                  <button onClick={downloadPdf} style={{ padding: "7px 14px", borderRadius: 8, border: "none", background: "var(--gr-green-500)", color: "#fff", font: "600 12px var(--font-sans)", cursor: "pointer", display: "flex", alignItems: "center", gap: 6 }}>
                    <Icon name="download" size={13} color="#fff" /> Download PDF
                  </button>
                </div>
              </div>
              <div style={{ background: "#fff", border: `1px solid ${T.border}`, borderRadius: 14, overflow: "hidden", boxShadow: "0 4px 24px rgba(0,0,0,.06)" }}>
                <iframe srcDoc={resumeHtml} style={{ width: "100%", height: "1123px", border: "none", display: "block" }} title="Resume preview" />
              </div>
            </div>
          )}
        </main>
      )}
    </div>
  );
}

window.ResumeBuilder = ResumeBuilder;