/* =====================================================================
   admin.jsx — internal review dashboard + submission detail
   ===================================================================== */

function AdminTop({ go }) {
  return (
    <div className="admin-top">
      <div className="admin-top__inner">
        <div className="admin-top__id">
          <Brandmark height={22} />
          <span className="admin-top__title">Freedom Filled<span className="reg">&reg;</span> <b>Audit Admin</b></span>
          <span className="admin-top__badge">Internal</span>
        </div>
        <div className="admin-top__user">
          <span>Karl &middot; Tracy Harris Co</span>
          <span className="admin-top__avatar">KH</span>
        </div>
      </div>
    </div>
  );
}

function bandName(key) { return window.FFP.BANDS.find(b => b.key === key).name; }
function archName(key) { return window.FFP.ARCHETYPES[key].name; }
function leakName(key) { return window.FFP.DIM[key].leak; }

const SYNC_OFFSETS = { offer_spine: 6, trust_production: 14, demand_engine: -4, sales_leadership: 4, delivery_leverage: -10, life_integration: -2, ceo_identity: -6, expansion_readiness: 0 };
function synthDims(row) {
  if (row.sample) return window.FFP.SAMPLE_RESULT.dimensionScores;
  const s = {};
  window.FFP.DIMENSIONS.forEach(d => { s[d.key] = Math.max(15, Math.min(96, row.score + (SYNC_OFFSETS[d.key] || 0))); });
  s[row.primary] = Math.max(14, row.score - 34);
  s[row.secondary] = Math.max(18, row.score - 20);
  return s;
}

function AcPill({ status }) {
  const map = {
    synced: { dot: "dot-ok", label: "Synced" },
    failed: { dot: "dot-fail", label: "Failed" },
    retrying: { dot: "dot-warn", label: "Retrying" },
    pending: { dot: "dot-idle", label: "Pending" },
  }[status] || { dot: "dot-idle", label: status };
  return <span className="pill pill--status"><span className={"severity-dot " + map.dot}></span>{map.label}</span>;
}
function PdfPill({ status }) {
  const map = {
    generated: { dot: "dot-ok", label: "Generated" },
    failed: { dot: "dot-fail", label: "Failed" },
    pending: { dot: "dot-idle", label: "Pending" },
  }[status] || { dot: "dot-idle", label: status };
  return <span className="pill pill--status"><span className={"severity-dot " + map.dot}></span>{map.label}</span>;
}

/* ============ DASHBOARD ============ */
function AdminDashboard({ go, openDetail }) {
  const subs = window.FFP.SUBMISSIONS;
  const [q, setQ] = useState("");
  const [band, setBand] = useState("");
  const [source, setSource] = useState("");
  const [ac, setAc] = useState("");

  const rows = subs.filter(r => {
    if (q && !(r.name.toLowerCase().includes(q.toLowerCase()) || r.email.toLowerCase().includes(q.toLowerCase()) || r.id.toLowerCase().includes(q.toLowerCase()))) return false;
    if (band && r.bandKey !== band) return false;
    if (source && r.source !== source) return false;
    if (ac && r.ac !== ac) return false;
    return true;
  });

  const avg = Math.round(subs.reduce((s, r) => s + r.score, 0) / subs.length);
  const ffmReady = subs.filter(r => r.bandKey === "expansion_ready" || r.pathway.includes("FFM")).length;
  const issues = subs.filter(r => r.ac === "failed" || r.ac === "retrying" || r.pdf === "failed").length;

  const stats = [
    { icon: "file", label: "Submissions this week", val: subs.length },
    { icon: "compass", label: "Average score", val: <>{avg}<small>/100</small></> },
    { icon: "star", label: "Expansion / FFM ready", val: ffmReady },
    { icon: "alert", label: "Needs attention", val: issues },
  ];

  return (
    <div className="admin">
      <AdminTop go={go} />
      <div className="admin-wrap">
        <div className="admin-head">
          <div>
            <h1>Audit submissions</h1>
            <p>Review completed pathway audits and route high-value leads.</p>
          </div>
          <div style={{ display: "flex", gap: 9 }}>
            <Btn variant="outline" iconLeft="download" style={{ padding: "11px 18px", fontSize: 11 }}>Export CSV</Btn>
            <Btn variant="" onClick={() => go("landing")} style={{ padding: "11px 18px", fontSize: 11 }} iconLeft="eye">View public audit</Btn>
          </div>
        </div>

        <div className="stat-row">
          {stats.map(s => (
            <div className="stat" key={s.label}>
              <p className="stat__label"><Icon name={s.icon} size={13} />{s.label}</p>
              <div className="stat__val">{s.val}</div>
            </div>
          ))}
        </div>

        <div className="filters">
          <div className="filters__search"><Icon name="search" size={15} /><input placeholder="Search name, email or ID" value={q} onChange={e => setQ(e.target.value)} /></div>
          <select className="filter-sel" value={band} onChange={e => setBand(e.target.value)}>
            <option value="">All bands</option>
            {window.FFP.BANDS.map(b => <option key={b.key} value={b.key}>{b.name}</option>)}
          </select>
          <select className="filter-sel" value={source} onChange={e => setSource(e.target.value)}>
            <option value="">All sources</option>
            {window.FFP.SOURCES.map(s => <option key={s.v} value={s.v}>{s.label}</option>)}
          </select>
          <select className="filter-sel" value={ac} onChange={e => setAc(e.target.value)}>
            <option value="">All sync states</option>
            <option value="synced">Synced</option>
            <option value="failed">Failed</option>
            <option value="retrying">Retrying</option>
            <option value="pending">Pending</option>
          </select>
        </div>

        <div className="tbl-wrap">
          <div className="tbl-scroll">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Respondent</th><th>Completed</th><th>Country</th><th>Source</th>
                  <th>Score</th><th>Band</th><th>Archetype</th><th>Primary leak</th>
                  <th>Pathway</th><th>AC sync</th><th>PDF</th>
                </tr>
              </thead>
              <tbody>
                {rows.map(r => (
                  <tr key={r.id} onClick={() => openDetail(r)}>
                    <td><div className="tbl__name">{r.name}</div><div className="tbl__email">{r.email}</div></td>
                    <td>{r.date}</td>
                    <td>{r.country}</td>
                    <td style={{ textTransform: "capitalize" }}>{r.source}</td>
                    <td><span className="tbl__score">{r.score}</span></td>
                    <td><span className={"pill pill--band-" + r.bandKey}>{bandName(r.bandKey)}</span></td>
                    <td>{archName(r.archetypeKey)}</td>
                    <td><span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span className="severity-dot sev-active"></span>{leakName(r.primary)}</span></td>
                    <td>{r.pathway}</td>
                    <td><AcPill status={r.ac} /></td>
                    <td><PdfPill status={r.pdf} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="tbl-foot">
            <span>Showing {rows.length} of {subs.length} submissions</span>
            <span className="state-note"><Icon name="refresh" size={13} />Live sync to ActiveCampaign &middot; last run 2 min ago</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============ SUBMISSION DETAIL ============ */
function AdminDetail({ go, row, back }) {
  const F = window.FFP;
  const dims = synthDims(row);
  const ranked = F.rankedDims(dims);
  const [note, setNote] = useState("");
  const [notes, setNotes] = useState(row.sample
    ? [{ t: "High-intent lead. Strong trust score, clear freedom leak. Good FFB strategy-call fit, flag for personal follow-up.", who: "Tracy", when: "8 Jun 2026, 4:12pm" }]
    : []);

  // deterministic representative Q&A
  const qa = F.QUESTIONS.map(qq => {
    const sc = dims[qq.dim];
    let idx = sc < 40 ? 3 : sc < 60 ? 2 : sc < 80 ? 1 : 0;
    if (row.sample && F.SAMPLE_RESULT) { /* keep representative */ }
    idx = Math.min(idx, qq.options.length - 1);
    return { q: qq, opt: qq.options[idx] };
  });

  const addNote = () => {
    if (!note.trim()) return;
    setNotes([{ t: note.trim(), who: "Karl", when: "Just now" }, ...notes]);
    setNote("");
  };

  return (
    <div className="admin">
      <AdminTop go={go} />
      <div className="admin-wrap">
        <button className="detail-back" onClick={back}><Icon name="arrowLeft" size={14} />Back to submissions</button>
        <div className="detail-head">
          <div>
            <h1>{row.name}</h1>
            <div className="sub"><span>{row.id}</span><span>{row.email}</span><span>Completed {row.date}</span></div>
          </div>
          <div className="detail-actions">
            <Btn variant="outline" iconLeft="file" onClick={() => go("results")} style={{ padding: "10px 16px", fontSize: 11 }}>Open report</Btn>
            <Btn variant="outline" iconLeft="download" style={{ padding: "10px 16px", fontSize: 11 }}>Download PDF</Btn>
            {(row.ac === "failed" || row.ac === "retrying") && <Btn variant="outline" iconLeft="refresh" style={{ padding: "10px 16px", fontSize: 11 }}>Retry sync</Btn>}
            <Btn variant="" iconLeft="check" style={{ padding: "10px 16px", fontSize: 11 }}>{row.reviewed ? "Reviewed" : "Mark reviewed"}</Btn>
          </div>
        </div>

        <div className="detail-grid">
          {/* LEFT */}
          <div>
            <div className="panel result-summary">
              <p className="panel__title">Result summary</p>
              <div style={{ display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
                <div><div className="big">{row.score}<span style={{ fontSize: 18, color: "rgba(246,244,241,0.6)" }}>/100</span></div></div>
                <div style={{ flex: 1, minWidth: 200 }}>
                  <div style={{ fontFamily: "var(--f-serif-display)", fontSize: 22 }}>{bandName(row.bandKey)}</div>
                  <div className="meta-line">{archName(row.archetypeKey)}</div>
                  <div style={{ maxWidth: 300, marginTop: 8 }}><BandScale score={row.score} compact /></div>
                </div>
              </div>
              <div className="rs-row">
                <span className="tag tag--leak">Primary &middot; {leakName(row.primary)}</span>
                <span className="tag" style={{ background: "rgba(246,244,241,0.12)", color: "rgba(246,244,241,0.9)" }}>Secondary &middot; {leakName(row.secondary)}</span>
                <span className="tag tag--band" style={{ background: "rgba(110,142,119,0.3)", color: "#dfeae0" }}>Pathway &middot; {row.pathway}</span>
              </div>
            </div>

            <div className="panel">
              <p className="panel__title">Dimension scores</p>
              <div className="r-2col r-2col--top" style={{ gap: 28 }}>
                <div style={{ display: "grid", placeItems: "center" }}><RadarChart scores={dims} size={300} animate={false} /></div>
                <div><DimensionBars scores={dims} animate={false} /></div>
              </div>
            </div>

            <div className="panel">
              <p className="panel__title">Full question &amp; answer log</p>
              <div className="qa-list">
                {qa.map(({ q, opt }, i) => (
                  <div className="qa-item" key={q.id}>
                    <p className="qa-q"><span className="qn">{String(i + 1).padStart(2, "0")}</span>{q.text}</p>
                    <p className="qa-a"><Icon name="check" size={13} style={{ color: "var(--p-sage)" }} />{opt.text}<span className="dim">{F.DIM[q.dim].internal}</span></p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* RIGHT */}
          <div>
            <div className="panel">
              <p className="panel__title">Profile</p>
              <dl className="kv">
                <div><dt>Name</dt><dd>{row.name}</dd></div>
                <div><dt>Email</dt><dd style={{ fontSize: 12.5 }}>{row.email}</dd></div>
                <div><dt>Country</dt><dd>{row.country}</dd></div>
                <div><dt>Business stage</dt><dd style={{ textTransform: "capitalize" }}>{(F.BUSINESS_STAGES.find(s => s.v === row.stage) || {}).label || row.stage}</dd></div>
                <div><dt>Offer type</dt><dd>{(F.OFFER_TYPES.find(s => s.v === row.offer) || {}).label || row.offer}</dd></div>
                <div><dt>Source</dt><dd style={{ textTransform: "capitalize" }}>{row.source}</dd></div>
              </dl>
            </div>

            <div className="panel">
              <p className="panel__title">Signals &amp; tags</p>
              <div className="tag-cloud">
                {(row.sample ? F.SAMPLE_RESULT.tags : ["ffp_audit_completed", "ffp_audit_band_" + row.bandKey, "ffp_audit_leak_" + leakName(row.primary).split(" ")[0].toLowerCase(), "ffp_audit_archetype_" + row.archetypeKey, "ffp_audit_source_" + row.source]).map(t => <code key={t}>{t}</code>)}
              </div>
            </div>

            <div className="panel">
              <p className="panel__title">Delivery status</p>
              <div className="sync-row"><span className="sync-label">ActiveCampaign contact</span><AcPill status={row.ac} /></div>
              <div className="sync-row"><span className="sync-label">Custom fields</span><AcPill status={row.ac === "failed" ? "failed" : "synced"} /></div>
              <div className="sync-row"><span className="sync-label">Tags ({(row.sample ? F.SAMPLE_RESULT.tags.length : 5)})</span><AcPill status={row.ac} /></div>
              <div className="sync-row"><span className="sync-label">PDF report</span><PdfPill status={row.pdf} /></div>
              {row.ac === "failed" && <div style={{ marginTop: 12, fontSize: 12, color: "#9a3d31", background: "rgba(180,73,59,0.08)", padding: "10px 12px", borderRadius: 6, lineHeight: 1.5 }}><Icon name="alert" size={13} style={{ verticalAlign: "-2px", marginRight: 6 }} />Sync failed: contact rate-limited (429). 1 retry queued.</div>}
              {(row.ac === "failed" || row.ac === "retrying" || row.pdf === "failed") && (
                <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
                  <Btn variant="outline" iconLeft="refresh" style={{ padding: "9px 14px", fontSize: 11 }}>Retry sync</Btn>
                  {row.pdf === "failed" && <Btn variant="outline" iconLeft="refresh" style={{ padding: "9px 14px", fontSize: 11 }}>Regenerate PDF</Btn>}
                </div>
              )}
            </div>

            <div className="panel">
              <p className="panel__title">Internal notes</p>
              <textarea className="notes-area" placeholder="Add a note for the team..." value={note} onChange={e => setNote(e.target.value)} />
              <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 10 }}><Btn variant="" onClick={addNote} style={{ padding: "9px 16px", fontSize: 11 }}>Add note</Btn></div>
              <div className="note-log">
                {notes.map((n, i) => (
                  <div className="note-log__item" key={i}>{n.t}<div className="note-log__meta">{n.who} &middot; {n.when}</div></div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminDashboard, AdminDetail });