// Company benchmark + Contribute form
const { useState: cbUseState, useMemo: cbUseMemo } = React;

function CompanyBenchmark({ state, setState, result, onContribute }) {
  const fmt = window.TaxEngine.formatINR;

  // Local filter state — not persisted to URL, just for narrowing the picker
  const [benchIndustry, setBenchIndustry] = cbUseState("");
  const [benchField, setBenchField] = cbUseState("");
  const [benchYoE, setBenchYoE] = cbUseState("");

  const filteredCompanies = benchIndustry
    ? window.COMPANIES.filter(c => c.sector === benchIndustry)
    : window.COMPANIES;

  const company = window.COMPANIES.find(c => c.slug === state.companySlug);

  // If a level is typed and matches, use it; otherwise aggregate all levels
  const exactLevel = company && state.level ? company.levels[state.level] : null;
  const levelData = cbUseMemo(() => {
    if (!company) return null;
    if (exactLevel) return exactLevel;
    // Aggregate across all levels: weighted medians approximated as weighted average of medians
    const levels = Object.values(company.levels);
    if (!levels.length) return null;
    const totalN = levels.reduce((s, l) => s + l.n, 0);
    const wavg = (key) => levels.reduce((s, l) => s + l[key] * l.n, 0) / totalN;
    return {
      n: totalN,
      medianCTC:      +wavg("medianCTC").toFixed(1),
      p25:            +wavg("p25").toFixed(1),
      p75:            +wavg("p75").toFixed(1),
      medianRSU:      +wavg("medianRSU").toFixed(1),
      medianBonus:    +wavg("medianBonus").toFixed(1),
      medianTakeHome: +wavg("medianTakeHome").toFixed(2),
      _isAggregate: true,
    };
  }, [company, exactLevel]);

  const yourCTCLakhs = result.totalCTC / 100000;
  const yourTakeHomeLakhs = result.monthlyTakeHome / 100000;

  // Clear company/level if filtered out by new industry selection
  const handleIndustryChange = (val) => {
    setBenchIndustry(val);
    const still = val ? window.COMPANIES.filter(c => c.sector === val) : window.COMPANIES;
    if (state.companySlug && !still.find(c => c.slug === state.companySlug)) {
      setState(s => ({ ...s, companySlug: "", level: "" }));
    }
  };

  // Position vs band
  let position = null;
  if (levelData) {
    if (yourCTCLakhs < levelData.p25) position = { label: "Below p25", color: "var(--accent-orange)" };
    else if (yourCTCLakhs < levelData.medianCTC) position = { label: "p25 → median", color: "var(--accent-yellow)" };
    else if (yourCTCLakhs < levelData.p75) position = { label: "Median → p75", color: "var(--accent-green)" };
    else position = { label: "Above p75", color: "var(--accent-purple)" };
  }

  return (
    <AccordionSection
      id="benchmark"
      title="Benchmark vs your company"
      subtitle={`Powered by ${window.COMPANIES_TOTAL_N.toLocaleString("en-IN")} anonymous data points`}
      icon="📊"
    >
      <div className="form-stack">
        <div className="form-stack__note" style={{ background: "rgba(0,217,163,0.06)", borderColor: "rgba(0,217,163,0.2)" }}>
          <strong>Real anonymous data</strong> — Benchmark cards appear once a company + level has enough submissions. Not scraped, not estimated.
        </div>

        {/* Row 1: Industry + Field of Work */}
        <div className="bench-pickers">
          <label className="bench-picker">
            <span className="bench-picker__label">Industry</span>
            <select
              value={benchIndustry}
              onChange={(e) => handleIndustryChange(e.target.value)}
              className="bench-picker__select"
            >
              <option value="">All industries</option>
              {INDUSTRIES.map(i => (
                <option key={i.slug} value={i.slug}>{i.name}</option>
              ))}
            </select>
          </label>
          <label className="bench-picker">
            <span className="bench-picker__label">Field of Work</span>
            <select
              value={benchField}
              onChange={(e) => setBenchField(e.target.value)}
              className="bench-picker__select"
            >
              <option value="">All fields</option>
              {Object.keys(FIELDS_OF_WORK).map(f => (
                <option key={f} value={f}>{f}</option>
              ))}
            </select>
          </label>
        </div>

        {/* Row 2: Company + Level */}
        <div className="bench-pickers">
          <label className="bench-picker">
            <span className="bench-picker__label">Company</span>
            <select
              value={state.companySlug}
              onChange={(e) => setState(s => ({ ...s, companySlug: e.target.value, level: "" }))}
              className="bench-picker__select"
            >
              <option value="">{benchIndustry ? `${filteredCompanies.length} companies…` : "Select company…"}</option>
              {filteredCompanies.map(c => (
                <option key={c.slug} value={c.slug}>{c.name}</option>
              ))}
            </select>
          </label>
          <label className="bench-picker">
            <span className="bench-picker__label">Level <span style={{ fontWeight: 400, opacity: 0.55, fontSize: 11 }}>(optional)</span></span>
            <input
              type="text"
              value={state.level}
              onChange={(e) => setState(s => ({ ...s, level: e.target.value }))}
              className="bench-picker__select"
              placeholder={company ? "e.g. L5, SDE-2, Staff, IC4…" : "Pick company first"}
              disabled={!company}
              style={{ cursor: company ? "text" : "not-allowed" }}
            />
          </label>
        </div>

        {/* Row 3: Experience Range */}
        <div className="bench-pickers" style={{ gridTemplateColumns: "1fr 1fr" }}>
          <label className="bench-picker">
            <span className="bench-picker__label">Experience Range</span>
            <select
              value={benchYoE}
              onChange={(e) => setBenchYoE(e.target.value)}
              className="bench-picker__select"
            >
              <option value="">Select range…</option>
              {EXPERIENCE_RANGES.map(r => (
                <option key={r} value={r}>{r}</option>
              ))}
            </select>
          </label>
          {/* Context tag row */}
          {(benchField || benchYoE) && (
            <div className="bench-picker" style={{ justifyContent: "flex-end" }}>
              <span className="bench-picker__label">Context</span>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 2 }}>
                {benchField && (
                  <span style={{ background: "rgba(167,139,250,0.15)", border: "1px solid rgba(167,139,250,0.3)", borderRadius: 6, padding: "4px 10px", fontSize: 12, color: "var(--accent-purple)" }}>
                    {benchField}
                  </span>
                )}
                {benchYoE && (
                  <span style={{ background: "rgba(0,217,163,0.1)", border: "1px solid rgba(0,217,163,0.25)", borderRadius: 6, padding: "4px 10px", fontSize: 12, color: "var(--accent-green)" }}>
                    {benchYoE}
                  </span>
                )}
              </div>
            </div>
          )}
        </div>

        {levelData && (
          <div className="bench-card">
            <div className="bench-card__head">
              <div>
                <div className="bench-card__co">{company.name} · {levelData._isAggregate ? "All levels" : state.level}</div>
                <div className="bench-card__n">n = {levelData.n} submissions</div>
              </div>
              {position && (
                <div className="bench-card__pos" style={{ background: position.color, color: "#0a0820" }}>
                  You: {position.label}
                </div>
              )}
            </div>

            {/* Distribution band */}
            <div className="bench-band">
              <div className="bench-band__rail">
                {(() => {
                  const min = Math.min(levelData.p25 * 0.7, yourCTCLakhs * 0.9);
                  const max = Math.max(levelData.p75 * 1.3, yourCTCLakhs * 1.1);
                  const range = max - min;
                  const pct = (v) => ((v - min) / range) * 100;
                  return (
                    <>
                      <div
                        className="bench-band__zone"
                        style={{ left: pct(levelData.p25) + "%", width: (pct(levelData.p75) - pct(levelData.p25)) + "%" }}
                      ></div>
                      <div className="bench-band__median" style={{ left: pct(levelData.medianCTC) + "%" }}>
                        <span className="bench-band__median-tip">Median</span>
                      </div>
                      {yourCTCLakhs > 0 && (
                        <div className="bench-band__you" style={{ left: pct(yourCTCLakhs) + "%" }}>
                          <span className="bench-band__you-tip">You</span>
                        </div>
                      )}
                      <div className="bench-band__labels">
                        <span style={{ left: pct(levelData.p25) + "%" }}>p25 · ₹{levelData.p25}L</span>
                        <span style={{ left: pct(levelData.medianCTC) + "%" }}>p50 · ₹{levelData.medianCTC}L</span>
                        <span style={{ left: pct(levelData.p75) + "%" }}>p75 · ₹{levelData.p75}L</span>
                      </div>
                    </>
                  );
                })()}
              </div>
            </div>

            <div className="bench-stats">
              <div className="bench-stat">
                <div className="bench-stat__label">Median CTC</div>
                <div className="bench-stat__val">₹{levelData.medianCTC}L</div>
                <div className="bench-stat__yours">You: ₹{yourCTCLakhs.toFixed(1)}L</div>
              </div>
              <div className="bench-stat">
                <div className="bench-stat__label">Median RSU/yr</div>
                <div className="bench-stat__val">₹{levelData.medianRSU}L</div>
                <div className="bench-stat__yours">You: ₹{(state.rsuAnnual/100000).toFixed(1)}L</div>
              </div>
              <div className="bench-stat">
                <div className="bench-stat__label">Median Bonus</div>
                <div className="bench-stat__val">₹{levelData.medianBonus}L</div>
                <div className="bench-stat__yours">You: ₹{(state.bonusAnnual/100000).toFixed(1)}L</div>
              </div>
              <div className="bench-stat">
                <div className="bench-stat__label">Median take-home</div>
                <div className="bench-stat__val">₹{levelData.medianTakeHome.toFixed(2)}L/mo</div>
                <div className="bench-stat__yours">You: ₹{yourTakeHomeLakhs.toFixed(2)}L/mo</div>
              </div>
            </div>

            <button
              className="bench-contribute"
              onClick={() => onContribute({ industry: benchIndustry, fieldOfWork: benchField, experienceRange: benchYoE, companySlug: state.companySlug })}
            >
              <div className="bench-contribute__main">
                <span className="bench-contribute__icon">📥</span>
                <span className="bench-contribute__title">Add your anonymous data point</span>
              </div>
              <div className="bench-contribute__sub">Takes 30 seconds · helps the next person negotiate better</div>
            </button>
          </div>
        )}

        {!company && (
          <div className="bench-empty">
            Pick a company above to see how your offer compares — median CTC, RSU, bonus, and take-home from real submissions.
          </div>
        )}
      </div>
    </AccordionSection>
  );
}

// ── Taxonomy for the contribute form ───────────────────────────────
const INDUSTRIES = [
  { slug: "bigtech",   name: "Big Tech / FAANG" },
  { slug: "fintech",   name: "Fintech" },
  { slug: "ecommerce", name: "E-commerce" },
  { slug: "foodtech",  name: "Food / Quick Commerce" },
  { slug: "saas",      name: "SaaS / Enterprise" },
  { slug: "services",  name: "IT Services / Consulting" },
  { slug: "edtech",    name: "Edtech" },
  { slug: "healthtech",name: "Healthtech" },
  { slug: "gaming",    name: "Gaming" },
  { slug: "crypto",    name: "Crypto / Web3" },
  { slug: "media",     name: "Media / Content" },
  { slug: "auto",      name: "Auto / Mobility" },
  { slug: "manufact",  name: "Manufacturing" },
  { slug: "bfsi",      name: "Banking / BFSI" },
  { slug: "other",     name: "Other" },
];
const EXPERIENCE_RANGES = [
  "0–1 years", "1–3 years", "3–5 years", "5–8 years",
  "8–12 years", "12–15 years", "15+ years",
];
const CITIES = [
  "Bengaluru", "Mumbai", "Delhi NCR", "Pune", "Hyderabad",
  "Chennai", "Ahmedabad", "Kolkata", "Kochi", "Jaipur",
  "Remote (India)", "Other",
];
const FIELDS_OF_WORK = {
  "Engineering":      ["Software Engineer", "Senior Software Engineer", "Staff Engineer", "Principal Engineer", "Engineering Manager", "Director of Engineering", "VP Engineering", "CTO", "SRE / DevOps", "Security Engineer", "Mobile Engineer", "Frontend Engineer", "Backend Engineer", "Full Stack Engineer", "QA / Test Engineer"],
  "Data & ML":        ["Data Analyst", "Data Engineer", "Data Scientist", "ML Engineer", "Applied Scientist", "Research Scientist", "Analytics Manager", "Head of Data"],
  "Product":          ["Associate PM", "Product Manager", "Senior PM", "Group PM", "Director of Product", "VP Product", "CPO"],
  "Design":           ["Product Designer", "Senior Designer", "Lead Designer", "Design Manager", "Head of Design", "UX Researcher", "Content Designer", "Brand Designer"],
  "Marketing & Growth":["Marketing Executive", "Performance Marketer", "Brand Manager", "Growth Manager", "Marketing Manager", "Director of Marketing", "VP Marketing", "CMO", "SEO Specialist", "Content Marketer"],
  "Sales & BD":       ["SDR / BDR", "Account Executive", "Account Manager", "Enterprise Sales", "Sales Manager", "Director of Sales", "VP Sales", "CRO"],
  "Operations":       ["Operations Associate", "Operations Manager", "Senior Operations Manager", "Director of Ops", "VP Operations", "COO", "Supply Chain Manager"],
  "Finance":          ["Financial Analyst", "Senior Analyst", "Finance Manager", "Controller", "FP&A Manager", "Director of Finance", "VP Finance", "CFO"],
  "HR / People":      ["HR Generalist", "HR Business Partner", "Talent Acquisition", "Recruiter", "L&D Manager", "Head of People", "CHRO"],
  "Legal":            ["Legal Counsel", "Senior Counsel", "General Counsel", "Compliance Manager"],
  "Customer Success": ["CS Associate", "Customer Success Manager", "Senior CSM", "Director of CS"],
  "Other":            ["Other"],
};

function ContributeModal({ state, result, onClose, onSubmit, prefill = {} }) {
  const [step, setStep] = cbUseState("form"); // form, submitting, done
  const [industry, setIndustry] = cbUseState(prefill.industry || "");
  const [companySlug, setCompanySlug] = cbUseState(prefill.companySlug || state.companySlug || "");
  const [otherCompanyName, setOtherCompanyName] = cbUseState("");
  const [experienceRange, setExperienceRange] = cbUseState(prefill.experienceRange || "");
  const [yoe, setYoe] = cbUseState("");
  const [city, setCity] = cbUseState("");
  const [fieldOfWork, setFieldOfWork] = cbUseState(prefill.fieldOfWork || "");
  const [title, setTitle] = cbUseState("");
  const [otherTitle, setOtherTitle] = cbUseState("");
  const [gender, setGender] = cbUseState("");
  const [verifyEmail, setVerifyEmail] = cbUseState(false);

  const isOtherCompany = companySlug === "__other__";
  const isOtherTitle = title === "__other__";
  const company = window.COMPANIES.find(c => c.slug === companySlug);
  const displayCompanyName = isOtherCompany ? otherCompanyName : (company?.name || "");
  const displayTitle = isOtherTitle ? otherTitle : title;

  // Filter companies by industry; fall back to all if none match
  const filteredCompanies = industry
    ? window.COMPANIES.filter(c => c.sector === industry)
    : window.COMPANIES;
  const titlesForField = fieldOfWork ? FIELDS_OF_WORK[fieldOfWork] : [];

  const isValid = industry && companySlug &&
    (!isOtherCompany || otherCompanyName.trim()) &&
    experienceRange && city && fieldOfWork && title &&
    (!isOtherTitle || otherTitle.trim());

  const handleSubmit = async () => {
    setStep("submitting");
    try {
      await window.SupabaseClient.submitDataPoint({
        companySlug:      isOtherCompany ? ("other-" + otherCompanyName.trim().toLowerCase().replace(/\s+/g, "-")) : companySlug,
        fieldOfWork:      fieldOfWork,
        title:            displayTitle,
        level:            null,
        city:             city,
        experienceRange:  experienceRange,
        yoe:              yoe !== "" ? parseInt(yoe, 10) : null,
        gender:           gender || null,
        ctcLakhs:         result.totalCTC / 100000,
        basicLakhs:       (state.basicPct * result.totalCTC / 100) / 100000,
        rsuLakhs:         state.rsuAnnual / 100000,
        bonusLakhs:       state.bonusAnnual / 100000,
        regime:           state.regime,
        monthlyTakeHome:  result.monthlyTakeHome / 100000,
      });
    } catch (e) {
      console.warn("submit failed, proceeding anyway:", e.message);
    }
    setStep("done");
    setTimeout(() => { onSubmit(); }, 1800);
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 540 }}>
        {step === "form" && (
          <>
            <div className="modal__head">
              <div>
                <h3 className="modal__title">Contribute your data</h3>
                <div className="modal__sub">100% anonymous · no PII stored · only aggregates published when n ≥ 5</div>
              </div>
              <button className="modal__close" onClick={onClose}>×</button>
            </div>

            <div className="contrib">
              <div className="contrib__group-label">About you</div>
              <div className="contrib__row">
                <label className="contrib__field">
                  <span>Industry</span>
                  <select value={industry} onChange={e => { setIndustry(e.target.value); setCompanySlug(""); }} className="bench-picker__select">
                    <option value="">Select industry…</option>
                    {INDUSTRIES.map(i => <option key={i.slug} value={i.slug}>{i.name}</option>)}
                  </select>
                </label>
                <label className="contrib__field">
                  <span>Company</span>
                  <select value={companySlug} onChange={e => { setCompanySlug(e.target.value); setOtherCompanyName(""); }} className="bench-picker__select">
                    <option value="">{industry ? "Select company…" : "Pick industry first"}</option>
                    {filteredCompanies.map(c => <option key={c.slug} value={c.slug}>{c.name}</option>)}
                    <option value="__other__">Other / not listed</option>
                  </select>
                  {isOtherCompany && (
                    <input
                      type="text"
                      className="contrib__input"
                      placeholder="Type company name…"
                      value={otherCompanyName}
                      onChange={e => setOtherCompanyName(e.target.value)}
                      style={{ marginTop: 8 }}
                      autoFocus
                    />
                  )}
                </label>
              </div>

              <div className="contrib__row">
                <label className="contrib__field">
                  <span>Years of experience</span>
                  <input
                    type="number"
                    className="bench-picker__select"
                    placeholder="e.g. 4"
                    min={0} max={50}
                    value={yoe}
                    onChange={e => {
                      const v = e.target.value;
                      setYoe(v);
                      // Auto-pick the matching range
                      const n = parseInt(v, 10);
                      if (!isNaN(n)) {
                        if (n <= 1) setExperienceRange("0–1 years");
                        else if (n <= 3) setExperienceRange("1–3 years");
                        else if (n <= 5) setExperienceRange("3–5 years");
                        else if (n <= 8) setExperienceRange("5–8 years");
                        else if (n <= 12) setExperienceRange("8–12 years");
                        else if (n <= 15) setExperienceRange("12–15 years");
                        else setExperienceRange("15+ years");
                      }
                    }}
                  />
                </label>
                <label className="contrib__field">
                  <span>Experience range <span style={{ fontWeight: 400, opacity: 0.5, fontSize: 11 }}>(auto-filled)</span></span>
                  <select value={experienceRange} onChange={e => setExperienceRange(e.target.value)} className="bench-picker__select">
                    <option value="">Select range…</option>
                    {EXPERIENCE_RANGES.map(r => <option key={r} value={r}>{r}</option>)}
                  </select>
                </label>
              </div>

              <div className="contrib__row">
                <label className="contrib__field">
                  <span>Gender <span style={{ fontWeight: 400, opacity: 0.5, fontSize: 11 }}>(optional)</span></span>
                  <select value={gender} onChange={e => setGender(e.target.value)} className="bench-picker__select">
                    <option value="">Prefer not to say</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                    <option value="nonbinary">Non-binary</option>
                    <option value="other">Other</option>
                  </select>
                </label>
                <label className="contrib__field">
                  <span>City</span>
                  <select value={city} onChange={e => setCity(e.target.value)} className="bench-picker__select">
                    <option value="">Select city…</option>
                    {CITIES.map(c => <option key={c} value={c}>{c}</option>)}
                  </select>
                </label>
              </div>

              <div className="contrib__group-label">Your role</div>
              <div className="contrib__row">
                <label className="contrib__field">
                  <span>Field of work</span>
                  <select value={fieldOfWork} onChange={e => { setFieldOfWork(e.target.value); setTitle(""); }} className="bench-picker__select">
                    <option value="">Select field…</option>
                    {Object.keys(FIELDS_OF_WORK).map(f => <option key={f} value={f}>{f}</option>)}
                  </select>
                </label>
                <label className="contrib__field">
                  <span>Title</span>
                  <select value={title} onChange={e => { setTitle(e.target.value); setOtherTitle(""); }} className="bench-picker__select" disabled={!fieldOfWork}>
                    <option value="">{fieldOfWork ? "Select title…" : "Pick field first"}</option>
                    {titlesForField.map(t => <option key={t} value={t}>{t}</option>)}
                    {fieldOfWork && <option value="__other__">Other / not listed</option>}
                  </select>
                  {isOtherTitle && (
                    <input
                      type="text"
                      className="contrib__input"
                      placeholder="Type your title…"
                      value={otherTitle}
                      onChange={e => setOtherTitle(e.target.value)}
                      style={{ marginTop: 8 }}
                    />
                  )}
                </label>
              </div>

              <div className="contrib__summary">
                <div className="contrib__summary-title">What we'll record from your inputs:</div>
                <ul className="contrib__summary-list">
                  <li><span>Total CTC</span><span>{window.TaxEngine.formatINR(result.totalCTC, { compact: true })}/yr</span></li>
                  <li><span>RSU annual</span><span>{window.TaxEngine.formatINR(state.rsuAnnual, { compact: true })}/yr</span></li>
                  <li><span>Bonus</span><span>{window.TaxEngine.formatINR(state.bonusAnnual, { compact: true })}/yr</span></li>
                  <li><span>Monthly take-home</span><span>{window.TaxEngine.formatINR(result.monthlyTakeHome)}</span></li>
                  <li><span>Regime</span><span>{state.regime === "new" ? "New" : "Old"}</span></li>
                </ul>
              </div>

              <label className="contrib__verify">
                <input type="checkbox" checked={verifyEmail} onChange={e => setVerifyEmail(e.target.checked)} />
                <span>
                  <strong>Verify with company email</strong> (optional)
                  <span className="contrib__verify-sub">Adds a "verified" badge to your data point — boosts dataset trust. We send a one-time link, never store the email.</span>
                </span>
              </label>

              <div className="contrib__actions">
                <button className="contrib__cancel" onClick={onClose}>Cancel</button>
                <button
                  className="contrib__submit"
                  disabled={!isValid}
                  onClick={handleSubmit}
                >
                  Submit anonymously
                </button>
              </div>
            </div>
          </>
        )}

        {step === "submitting" && (
          <div className="contrib-state">
            <div className="contrib-state__spinner"></div>
            <div className="contrib-state__title">Submitting…</div>
            <div className="contrib-state__sub">Encrypting your submission · validating · saving securely</div>
          </div>
        )}

        {step === "done" && (
          <div className="contrib-state">
            <div className="contrib-state__check">✓</div>
            <div className="contrib-state__title">Thanks — you're in the dataset</div>
            <div className="contrib-state__sub">
              Aggregates refresh hourly. The next person looking at {displayCompanyName || INDUSTRIES.find(i => i.slug === industry)?.name} · {displayTitle} will see slightly better data because of you.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { CompanyBenchmark, ContributeModal });