// screens-d.jsx — Pipeline (kanban) and Settings screens
const { StatusPill, RecPill, FairnessBanner } = window.UI;

const PIPELINE_STAGES = [
  "AI screened",
  "HR reviewed",
  "Call scheduled",
  "Shortlisted",
  "Interviewed",
  "Offer",
];

function PipelineScreen({ candidates, positions, onOpen, canEdit = false }) {
  const { t } = window.I18N.useI18n();
  const [posFilter, setPosFilter] = React.useState("all");
  const buildBoard = React.useCallback((cands) => {
    const map = {};
    PIPELINE_STAGES.forEach(s => { map[s] = []; });
    cands.forEach(c => {
      const s = PIPELINE_STAGES.includes(c.status) ? c.status : "AI screened";
      map[s].push(c.id);
    });
    return map;
  }, []);
  const [board, setBoard] = React.useState(() => buildBoard(candidates));
  React.useEffect(() => { setBoard(buildBoard(candidates)); }, [candidates, buildBoard]);

  const [dragId, setDragId] = React.useState(null);
  const [dragOver, setDragOver] = React.useState(null);
  const [savingMsg, setSavingMsg] = React.useState("");

  const filteredId = (id) => {
    if (posFilter === "all") return true;
    const c = candidates.find(x => x.id === id);
    return c && c.positionId === posFilter;
  };

  const onDrop = async (stage) => {
    if (!dragId) return;
    if (!canEdit) { setDragId(null); setDragOver(null); return; }
    // Optimistic update
    const movedId = dragId;
    setBoard(prev => {
      const next = {};
      PIPELINE_STAGES.forEach(s => { next[s] = prev[s].filter(id => id !== movedId); });
      next[stage] = [movedId, ...next[stage]];
      return next;
    });
    setDragId(null); setDragOver(null);
    // Persist
    if (window.DATA?.api?.updateCandidateStatus) {
      setSavingMsg("กำลังบันทึก…");
      const { error } = await window.DATA.api.updateCandidateStatus(movedId, stage);
      setSavingMsg(error ? "❌ " + error.message : "✓ บันทึกแล้ว");
      setTimeout(() => setSavingMsg(""), 1800);
    }
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-eyebrow">{t.pipeline.eyebrow}</div>
          <h1 className="page-title">{t.pipeline.title}</h1>
          <div className="page-sub">{t.pipeline.sub}</div>
        </div>
        <div className="row gap-8" style={{ alignItems: "center" }}>
          <span className="muted" style={{ fontSize: 13 }}>{t.pipeline.filterPos}</span>
          <select className="settings-select" value={posFilter} onChange={e => setPosFilter(e.target.value)}>
            <option value="all">{t.pipeline.allPositions}</option>
            {positions.map(p => <option key={p.id} value={p.id}>{p.title}</option>)}
          </select>
        </div>
      </div>

      {savingMsg && (
        <div className="banner banner-info" style={{ marginBottom: 12 }}>
          <Icon name="info" size={14} className="banner-icon"/>
          <div className="banner-body" style={{ fontSize: 12.5 }}>{savingMsg}</div>
        </div>
      )}

      <div className="kanban">
        {PIPELINE_STAGES.map(stage => {
          const ids = (board[stage] || []).filter(filteredId);
          const cards = ids.map(id => candidates.find(c => c.id === id)).filter(Boolean);
          const avg = cards.length ? Math.round(cards.reduce((s, c) => s + (c.score || 0), 0) / cards.length) : null;
          const stageLabel = t.pipeline.stages[stage] || stage;
          return (
            <div
              key={stage}
              className={"kanban-col" + (dragOver === stage ? " is-over" : "")}
              onDragOver={(e) => { e.preventDefault(); setDragOver(stage); }}
              onDragLeave={() => setDragOver(null)}
              onDrop={() => onDrop(stage)}
            >
              <div className="kanban-col-head">
                <div className="kanban-col-title">{stageLabel}</div>
                <div className="kanban-col-meta">
                  <span className="kanban-col-count">{cards.length}</span>
                  {avg !== null && <span className="kanban-col-avg">{avg} {t.pipeline.avgFit}</span>}
                </div>
              </div>
              <div className="kanban-col-body">
                {cards.length === 0 && <div className="kanban-empty">{t.pipeline.empty}</div>}
                {cards.map(c => {
                  const pos = positions.find(p => p.id === c.positionId);
                  const sc = c.score || 0;
                  const tone = sc >= 80 ? "good" : sc >= 65 ? "ok" : "weak";
                  return (
                    <div
                      key={c.id}
                      className={"kanban-card" + (dragId === c.id ? " is-dragging" : "")}
                      draggable={canEdit}
                      onDragStart={() => canEdit && setDragId(c.id)}
                      onDragEnd={() => { setDragId(null); setDragOver(null); }}
                      onClick={() => onOpen("candidate", c.id)}
                      style={!canEdit ? { cursor: "pointer" } : undefined}
                    >
                      <div className="kanban-card-head">
                        <div className="kanban-card-name">{c.name}</div>
                        <span className={"kanban-card-score is-" + tone}>{sc}</span>
                      </div>
                      <div className="kanban-card-pos">{pos ? pos.title : ""}</div>
                      <div className="kanban-card-foot">
                        <RecPill rec={c.recommendation}/>
                        <span className="muted" style={{ fontSize: 11 }}>{c.appliedDate}</span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function SettingsScreen({ onOpen } = {}) {
  const { t, locale, setLocale } = window.I18N.useI18n();
  const s = t.settings;
  const [saved, setSaved] = React.useState(false);

  // Live team from Supabase (replaces the mocked team list)
  const [teamUsers, setTeamUsers] = React.useState(null);
  const [teamErr, setTeamErr] = React.useState("");
  const supabase = window.AUTH && window.AUTH.supabase;
  React.useEffect(() => {
    if (!supabase) return;
    let alive = true;
    supabase.rpc("admin_list_users").then(({ data, error }) => {
      if (!alive) return;
      if (error) { setTeamErr(error.message); setTeamUsers([]); return; }
      setTeamUsers(data || []);
    });
    return () => { alive = false; };
  }, []);
  const ROLE_LABEL_TH = { admin: "ผู้ดูแล", hr_manager: "หัวหน้างาน", recruiter: "ผู้สรรหา", viewer: "ผู้ดู", user: "ผู้ดู" };
  const meEmail = (window.AUTH && supabase) ? null : null; // resolved below via auth helper
  const [form, setForm] = React.useState({
    companyName: "Initial Estate", domain: "initialestate.com",
    country: "Thailand", currency: "THB", tz: "Asia/Bangkok (GMT+7)",
    model: "Claude Sonnet 4.5", autoScreen: true, rescoreOnEdit: true,
    explainLevel: "balanced", confidence: false,
    fairnessBanner: true, auditLog: true, candidateAccess: true, retention: "24",
    twoFA: true, sso: false, sessionTimeout: "30", ipAllowlist: false, ipRanges: "",
    notif: {
      newCandidate: { email: false, inApp: true },
      strongFit: { email: true, inApp: true },
      weeklyDigest: { email: true, inApp: false },
      mentions: { email: true, inApp: true },
    },
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  // Load saved settings from app_data.settings on mount
  React.useEffect(() => {
    if (!supabase) return;
    let alive = true;
    supabase.from("app_data").select("data").eq("key", "settings").maybeSingle().then(({ data, error }) => {
      if (!alive || error || !data?.data) return;
      setForm(f => ({ ...f, ...data.data }));
    });
    return () => { alive = false; };
  }, []);
  const setNotif = (key, ch, v) =>
    setForm(f => ({ ...f, notif: { ...f.notif, [key]: { ...f.notif[key], [ch]: v } } }));
  const [saveError, setSaveError] = React.useState("");
  const [saving, setSaving] = React.useState(false);
  const save = async () => {
    setSaveError("");
    setSaving(true);
    if (!supabase) { setSaving(false); setSaved(true); setTimeout(() => setSaved(false), 1800); return; }
    const { error } = await supabase.from("app_data").upsert({ key: "settings", data: form });
    setSaving(false);
    if (error) { setSaveError(error.message); return; }
    if (window.DATA?.invalidate) window.DATA.invalidate();
    setSaved(true);
    setTimeout(() => setSaved(false), 1800);
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-eyebrow">{s.eyebrow}</div>
          <h1 className="page-title">{s.title}</h1>
          <div className="page-sub">{s.sub}</div>
        </div>
        <button className={"btn btn-primary" + (saved ? " is-saved" : "")} onClick={save} disabled={saving}>
          {saving ? "กำลังบันทึก…" : saved ? "✓ " + s.saved : s.save}
        </button>
      </div>

      {saveError && (
        <div className="banner banner-info" style={{ marginBottom: 12, background: "#FEE2E2", borderColor: "#FCA5A5", color: "#991B1B" }}>
          <Icon name="alert" size={14} className="banner-icon"/>
          <div className="banner-body" style={{ fontSize: 13 }}>บันทึก settings ไม่สำเร็จ: {saveError}</div>
        </div>
      )}

      <div className="settings-grid">
        {/* Organisation */}
        <div className="card card-pad">
          <div className="card-title mb-12">{s.sections.org}</div>
          <div className="row gap-12 mb-16" style={{ alignItems: "center" }}>
            <div className="settings-logo-mark">IE</div>
            <button className="btn btn-quiet btn-sm">{s.org.upload}</button>
          </div>
          <Field label={s.org.name} hint={s.org.nameHint}>
            <input className="settings-input" value={form.companyName} onChange={e => set("companyName", e.target.value)}/>
          </Field>
          <Field label={s.org.domain} hint={s.org.domainHint}>
            <input className="settings-input" value={form.domain} onChange={e => set("domain", e.target.value)}/>
          </Field>
          <div className="settings-grid-2">
            <Field label={s.org.country}>
              <select className="settings-select" value={form.country} onChange={e => set("country", e.target.value)}>
                <option>Thailand</option><option>Singapore</option><option>Malaysia</option><option>Vietnam</option>
              </select>
            </Field>
            <Field label={s.org.currency}>
              <select className="settings-select" value={form.currency} onChange={e => set("currency", e.target.value)}>
                <option>THB</option><option>USD</option><option>SGD</option>
              </select>
            </Field>
          </div>
          <div className="settings-grid-2">
            <Field label={s.org.lang} hint={s.org.langHint}>
              <select className="settings-select" value={locale} onChange={e => setLocale(e.target.value)}>
                <option value="en">English</option>
                <option value="th">ภาษาไทย</option>
              </select>
            </Field>
            <Field label={s.org.tz}>
              <select className="settings-select" value={form.tz} onChange={e => set("tz", e.target.value)}>
                <option>Asia/Bangkok (GMT+7)</option>
                <option>Asia/Singapore (GMT+8)</option>
              </select>
            </Field>
          </div>
        </div>

        {/* AI scoring */}
        <div className="card card-pad">
          <div className="card-title mb-12">{s.sections.scoring}</div>
          <Field label={s.scoring.defaultModel} hint={s.scoring.modelHint}>
            <select className="settings-select" value={form.model} onChange={e => set("model", e.target.value)}>
              <option>Claude Sonnet 4.5</option>
              <option>Claude Haiku 4.5</option>
              <option>Claude Opus 4.5</option>
            </select>
          </Field>
          <Toggle label={s.scoring.autoScreen} hint={s.scoring.autoScreenHint}
            checked={form.autoScreen} onChange={v => set("autoScreen", v)}/>
          <Toggle label={s.scoring.rescoreOnEdit} hint={s.scoring.rescoreHint}
            checked={form.rescoreOnEdit} onChange={v => set("rescoreOnEdit", v)}/>
          <Field label={s.scoring.explainLevel}>
            <div className="settings-segments">
              {[["short", s.scoring.explainShort], ["balanced", s.scoring.explainBalanced], ["detailed", s.scoring.explainDetailed]].map(([v, lbl]) => (
                <button key={v}
                  className={"settings-segment" + (form.explainLevel === v ? " is-active" : "")}
                  onClick={() => set("explainLevel", v)}>{lbl}</button>
              ))}
            </div>
          </Field>
          <Toggle label={s.scoring.confidence} hint={s.scoring.confidenceHint}
            checked={form.confidence} onChange={v => set("confidence", v)}/>
        </div>

        {/* Fairness */}
        <div className="card card-pad settings-card-fairness">
          <div className="card-title mb-12">{s.sections.fairness}</div>
          <div className="settings-pdpa">
            <div className="settings-pdpa-title">⚖ {s.fairness.pdpaTitle}</div>
            <div className="settings-pdpa-body">{s.fairness.pdpaBody}</div>
          </div>
          <Field label={s.fairness.excluded} hint={s.fairness.excludedHint}>
            <div className="settings-chips">
              {s.fairness.excludedItems.map(item => <span key={item} className="settings-chip">{item}</span>)}
            </div>
          </Field>
          <Toggle label={s.fairness.banner} hint={s.fairness.bannerHint}
            checked={form.fairnessBanner} onChange={v => set("fairnessBanner", v)}/>
          <Toggle label={s.fairness.auditLog} hint={s.fairness.auditHint}
            checked={form.auditLog} disabled/>
          <Toggle label={s.fairness.candidateAccess} hint={s.fairness.accessHint}
            checked={form.candidateAccess} onChange={v => set("candidateAccess", v)}/>
          <Field label={s.fairness.retention}>
            <div className="settings-segments">
              {[["12", s.fairness.retention12], ["24", s.fairness.retention24], ["36", s.fairness.retention36]].map(([v, lbl]) => (
                <button key={v}
                  className={"settings-segment" + (form.retention === v ? " is-active" : "")}
                  onClick={() => set("retention", v)}>{lbl}</button>
              ))}
            </div>
          </Field>
        </div>

        {/* Security */}
        <div className="card card-pad">
          <div className="card-title mb-12">{s.sections.security}</div>
          <div className="settings-pdpa" style={{ background: "var(--green-50)", borderColor: "var(--green-100)" }}>
            <div className="settings-pdpa-title">🛡 {s.security.statusGood}</div>
            <div className="settings-pdpa-body">{s.security.statusBody}</div>
          </div>
          <Toggle label={s.security.twoFA} hint={s.security.twoFAHint}
            checked={form.twoFA} onChange={v => set("twoFA", v)}/>
          <Toggle label={s.security.sso} hint={s.security.ssoHint}
            checked={form.sso} onChange={v => set("sso", v)}/>
          <Field label={s.security.sessionTimeout}>
            <div className="settings-segments">
              {[["15", s.security.timeout15], ["30", s.security.timeout30], ["60", s.security.timeout60], ["480", s.security.timeout480]].map(([v, lbl]) => (
                <button key={v}
                  className={"settings-segment" + (form.sessionTimeout === v ? " is-active" : "")}
                  onClick={() => set("sessionTimeout", v)}>{lbl}</button>
              ))}
            </div>
          </Field>
          <Toggle label={s.security.ipAllowlist} hint={s.security.ipHint}
            checked={form.ipAllowlist} onChange={v => set("ipAllowlist", v)}/>
          {form.ipAllowlist && (
            <Field label="">
              <input className="settings-input" placeholder={s.security.ipPlaceholder}
                value={form.ipRanges} onChange={e => set("ipRanges", e.target.value)}/>
            </Field>
          )}
          <Toggle label={s.security.rateLimit} hint={s.security.rateLimitHint} checked={true} disabled/>
          <div className="settings-pdpa" style={{ background: "var(--rose-100)", borderColor: "var(--rose-200, #fecaca)", marginTop: 14 }}>
            <div className="settings-pdpa-title" style={{ color: "var(--rose-700)" }}>🚨 {s.security.breach}</div>
            <div className="settings-pdpa-body">{s.security.breachBody}</div>
          </div>
          <div className="row gap-8" style={{ marginTop: 12, flexWrap: "wrap" }}>
            <button className="btn btn-quiet btn-sm">{s.security.viewAudit}</button>
            <button className="btn btn-quiet btn-sm">{s.security.downloadSoc}</button>
          </div>
        </div>

        {/* Privacy & Data Subject Rights */}
        <div className="card card-pad">
          <div className="card-title mb-12">{s.sections.privacy}</div>

          <div className="settings-toggle">
            <div className="settings-toggle-body">
              <div className="settings-toggle-label">{s.privacy.dsarTitle}</div>
              <div className="settings-toggle-hint">{s.privacy.dsarBody}</div>
              <div className="row gap-12" style={{ marginTop: 8, fontSize: 12 }}>
                <span style={{ color: "var(--amber-600, #b45309)", fontWeight: 600 }}>● {s.privacy.dsarOpen.replace("{n}", "3")}</span>
                <span className="muted">{s.privacy.dsarSla}</span>
              </div>
            </div>
            <button className="btn btn-quiet btn-sm">{s.privacy.viewQueue}</button>
          </div>

          <div className="settings-toggle">
            <div className="settings-toggle-body">
              <div className="settings-toggle-label">{s.privacy.consent}</div>
              <div className="settings-toggle-hint">{s.privacy.consentBody}</div>
            </div>
            <button className="btn btn-quiet btn-sm">{s.privacy.consentExport}</button>
          </div>

          <div className="settings-toggle">
            <div className="settings-toggle-body">
              <div className="settings-toggle-label">{s.privacy.dpa}</div>
              <div className="settings-toggle-hint">{s.privacy.dpaBody}</div>
            </div>
            <button className="btn btn-quiet btn-sm">{s.privacy.dpaDownload}</button>
          </div>

          <Field label={s.privacy.subprocessors} hint={s.privacy.subprocessorsBody}>
            <div className="col gap-8" style={{ marginTop: 6 }}>
              {s.privacy.subprocessorsList.map((sp, i) => (
                <div key={i} className="row gap-12" style={{ padding: "10px 12px", background: "var(--sand-50)", borderRadius: 8, alignItems: "flex-start" }}>
                  <div style={{ width: 28, height: 28, borderRadius: 6, background: "var(--sand-200)", color: "var(--sand-800)", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 600, flexShrink: 0 }}>{sp.name.charAt(0)}</div>
                  <div className="col flex-1" style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{sp.name}</div>
                    <div className="muted" style={{ fontSize: 12 }}>{sp.purpose} · {sp.region}</div>
                  </div>
                </div>
              ))}
            </div>
          </Field>

          <div className="settings-toggle is-disabled">
            <div className="settings-toggle-body">
              <div className="settings-toggle-label">{s.privacy.rightToErasure}</div>
              <div className="settings-toggle-hint">{s.privacy.rtbfBody}</div>
            </div>
          </div>
        </div>

        {/* Notifications */}
        <div className="card card-pad">
          <div className="card-title mb-12">{s.sections.notif}</div>
          <div className="settings-notif-table">
            <div className="settings-notif-head">
              <div></div>
              <div className="settings-notif-ch">{s.notif.email}</div>
              <div className="settings-notif-ch">{s.notif.inApp}</div>
            </div>
            {[
              ["newCandidate", s.notif.newCandidate],
              ["strongFit", s.notif.strongFit],
              ["weeklyDigest", s.notif.weeklyDigest],
              ["mentions", s.notif.mentions],
            ].map(([key, label]) => (
              <div key={key} className="settings-notif-row">
                <div className="settings-notif-label">{label}</div>
                <div className="settings-notif-cell">
                  <Checkbox checked={form.notif[key].email} onChange={v => setNotif(key, "email", v)}/>
                </div>
                <div className="settings-notif-cell">
                  <Checkbox checked={form.notif[key].inApp} onChange={v => setNotif(key, "inApp", v)}/>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Integrations */}
        <div className="card card-pad">
          <div className="card-title mb-12">{s.sections.integrations}</div>
          <div className="settings-integrations">
            {s.integrations.items.map((it, i) => (
              <div key={i} className="settings-integration">
                <div className="settings-integration-icon">{it.name.charAt(0)}</div>
                <div className="settings-integration-body">
                  <div className="settings-integration-name">{it.name}</div>
                  <div className="settings-integration-desc">{it.desc}</div>
                </div>
                <button className={"settings-integration-btn is-" + it.status}>
                  {it.status === "connected" ? s.integrations.connected
                    : it.status === "reconnect" ? s.integrations.reconnect
                    : s.integrations.connect}
                </button>
              </div>
            ))}
          </div>
        </div>

        {/* Team — live from Supabase */}
        <div className="card card-pad">
          <div className="row" style={{ justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
            <div className="card-title" style={{ margin: 0 }}>{s.sections.team}</div>
            {onOpen && (
              <button className="btn btn-quiet btn-sm" onClick={() => onOpen("users")}>
                Manage team →
              </button>
            )}
          </div>
          {teamErr && (
            <div className="muted" style={{ fontSize: 12.5, padding: "8px 0", color: "var(--rose-600, #b91c1c)" }}>
              ไม่สามารถโหลดรายชื่อทีมได้: {teamErr}
            </div>
          )}
          <div className="settings-team">
            {teamUsers === null && (
              <div className="muted" style={{ fontSize: 12.5, padding: "8px 0" }}>กำลังโหลด…</div>
            )}
            {teamUsers && teamUsers.length === 0 && !teamErr && (
              <div className="muted" style={{ fontSize: 12.5, padding: "8px 0" }}>ยังไม่มีสมาชิก</div>
            )}
            {teamUsers && teamUsers.map((m) => {
              const display = m.full_name || m.email.split("@")[0];
              const initial = (display || "?").charAt(0).toUpperCase();
              const roleLabel = ROLE_LABEL_TH[m.role] || m.role;
              return (
                <div key={m.id} className="settings-team-row">
                  <div className="settings-team-avatar">{initial}</div>
                  <div className="settings-team-body">
                    <div className="settings-team-name">{display}</div>
                    <div className="settings-team-email">{m.email}</div>
                  </div>
                  <div className="settings-team-role" style={{ minWidth: 110, textAlign: "right", fontSize: 13, color: "var(--text-muted)" }}>
                    {roleLabel}
                  </div>
                </div>
              );
            })}
          </div>
          {teamUsers && teamUsers.length > 0 && (
            <div className="muted" style={{ fontSize: 11.5, marginTop: 10 }}>
              เปลี่ยน role หรือลบสมาชิกได้ที่หน้า Users (เฉพาะ Admin / HR Manager)
            </div>
          )}
        </div>

        {/* Danger */}
        <div className="card card-pad settings-card-danger">
          <div className="card-title mb-12">{s.sections.danger}</div>
          <div className="settings-danger-row">
            <div className="settings-danger-body">
              <div className="settings-danger-name">{s.danger.export}</div>
              <div className="settings-danger-hint">{s.danger.exportHint}</div>
            </div>
            <button className="btn btn-quiet btn-sm">{s.danger.export}</button>
          </div>
          <div className="settings-danger-row">
            <div className="settings-danger-body">
              <div className="settings-danger-name">{s.danger.deleteWs}</div>
              <div className="settings-danger-hint">{s.danger.deleteHint}</div>
            </div>
            <button className="btn settings-btn-danger">{s.danger.deleteWs}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({ label, hint, children }) {
  return (
    <div className="settings-field">
      <div className="settings-field-label">{label}</div>
      {children}
      {hint && <div className="settings-field-hint">{hint}</div>}
    </div>
  );
}

function Toggle({ label, hint, checked, onChange, disabled }) {
  return (
    <div className={"settings-toggle" + (disabled ? " is-disabled" : "")}>
      <div className="settings-toggle-body">
        <div className="settings-toggle-label">{label}</div>
        {hint && <div className="settings-toggle-hint">{hint}</div>}
      </div>
      <button
        className={"settings-switch" + (checked ? " is-on" : "")}
        onClick={() => !disabled && onChange && onChange(!checked)}
        disabled={disabled}
        aria-pressed={checked}
        type="button"
      >
        <span className="settings-switch-knob"></span>
      </button>
    </div>
  );
}

function Checkbox({ checked, onChange }) {
  return (
    <button
      type="button"
      className={"settings-checkbox" + (checked ? " is-on" : "")}
      onClick={() => onChange && onChange(!checked)}
      aria-pressed={checked}
    >
      {checked && <span>✓</span>}
    </button>
  );
}

window.SCREENS_D = { PipelineScreen, SettingsScreen };