// Dashboard, Positions list, Position detail

const { StatusPill, RecPill, Avatar, ScoreRing, ScoreBar, FairnessBanner, scoreColor } = window.UI;

const Dashboard = ({ stats, candidates, positions, activity, onOpen }) => {
  const { t, locale } = window.I18N.useI18n();
  const top = [...candidates].sort((a, b) => b.score - a.score).slice(0, 5);
  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">{t.dash.eyebrow}</div>
          <h1 className="page-title">{t.dash.title}</h1>
          <div className="page-sub">{t.dash.sub}</div>
        </div>
        <div className="row gap-8">
          <button className="btn btn-ghost"><Icon name="download" size={14}/>{t.topbar.export}</button>
          <button className="btn btn-primary" onClick={() => onOpen("upload")}><Icon name="upload" size={14}/>{t.dash.uploadBtn}</button>
        </div>
      </div>

      <div className="stat-grid">
        <Stat label={t.dash.stats.total} value={stats.totalCandidates} delta={t.dash.deltas[stats.totalCandidatesDeltaKey]} positive/>
        <Stat label={t.dash.stats.pending} value={stats.pendingReview} delta={t.dash.deltas[stats.pendingReviewDeltaKey]} accent="amber"/>
        <Stat label={t.dash.stats.avg} value={stats.avgFitScore} delta={t.dash.deltas[stats.avgFitScoreDeltaKey]} positive suffix=""/>
        <Stat label={t.dash.stats.short} value={stats.shortlisted} delta={t.dash.deltas[stats.shortlistedDeltaKey]} positive/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 18 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">{t.dash.topCands}</div>
              <div className="card-sub">{t.dash.topCandsSub}</div>
            </div>
            <button className="btn btn-quiet btn-sm" onClick={() => onOpen("candidates")}>{t.dash.viewAll}<Icon name="arrow-right" size={12}/></button>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>{t.dash.cols.candidate}</th>
                <th>{t.dash.cols.position}</th>
                <th style={{ width: 110 }}>{t.dash.cols.fit}</th>
                <th>{t.dash.cols.status}</th>
              </tr>
            </thead>
            <tbody>
              {top.map(c => {
                const pos = positions.find(p => p.id === c.positionId);
                return (
                  <tr key={c.id} className="row-link" onClick={() => onOpen("candidate", c.id)}>
                    <td>
                      <div className="row gap-10">
                        <Avatar initials={c.initials} color={c.avatarColor} size="sm"/>
                        <div className="col">
                          <div style={{ fontWeight: 500 }}>{c.name}</div>
                          <div className="subtle" style={{ fontSize: 12 }}>{c.currentTitle}</div>
                        </div>
                      </div>
                    </td>
                    <td className="muted" style={{ fontSize: 12.5 }}>{pos?.title}</td>
                    <td>
                      <div className="row gap-8">
                        <div style={{
                          width: 36, height: 4, borderRadius: 999,
                          background: "var(--sand-200)", overflow: "hidden", position: "relative"
                        }}>
                          <div style={{
                            width: c.score + "%", height: "100%",
                            background: scoreColor(c.score), borderRadius: 999
                          }}/>
                        </div>
                        <span style={{ fontFamily: "var(--font-serif)", fontSize: 16, fontWeight: 500, color: "var(--green-900)", fontVariantNumeric: "tabular-nums" }}>{c.score}</span>
                      </div>
                    </td>
                    <td><StatusPill status={c.status}/></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">{t.dash.activeTitle}</div>
              <div className="card-sub">{t.dash.activeSub}</div>
            </div>
            <button className="btn btn-quiet btn-sm" onClick={() => onOpen("positions")}>{t.dash.allBtn}<Icon name="arrow-right" size={12}/></button>
          </div>
          <div style={{ padding: "8px 0" }}>
            {positions.slice(0, 4).map(p => (
              <div
                key={p.id}
                className="row gap-12"
                style={{ padding: "12px 22px", borderBottom: "1px solid var(--border)", cursor: "pointer" }}
                onClick={() => onOpen("position", p.id)}
              >
                <div className="flex-1 col gap-4">
                  <div style={{ fontWeight: 500, fontSize: 13.5 }}>{p.title}</div>
                  <div className="row gap-8 subtle" style={{ fontSize: 11.5 }}>
                    <span>{p.department}</span>
                    <span>·</span>
                    <span>{p.candidates} candidates</span>
                  </div>
                </div>
                <div className="col" style={{ alignItems: "flex-end", gap: 4 }}>
                  {p.pendingReview > 0 && <span className="pill pill-amber"><span className="dot"/>{p.pendingReview} {t.dash.newSuffix}</span>}
                  <span className="subtle" style={{ fontSize: 11 }}>{t.dash.postedPrefix} {p.posted}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="card mt-16">
        <div className="card-head">
          <div>
            <div className="card-title">{t.dash.activity}</div>
            <div className="card-sub">{t.dash.activitySub}</div>
          </div>
        </div>
        <div style={{ padding: "8px 22px 16px" }}>
          {activity.map(a => (
            <div key={a.id} className="row gap-12" style={{ padding: "10px 0", borderBottom: "1px solid var(--border)" }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: a.kind === "ai" ? "var(--green-100)" : "var(--sand-200)",
                color: a.kind === "ai" ? "var(--green-700)" : "var(--sand-700)",
                display: "grid", placeItems: "center"
              }}>
                <Icon name={a.kind === "ai" ? "sparkles" : "users"} size={14}/>
              </div>
              <div className="flex-1" style={{ fontSize: 13 }}>
                <span style={{ fontWeight: 500 }}>{a.who}</span> {a.what} <span style={{ fontWeight: 500 }}>{a.target}</span>
              </div>
              <div className="subtle" style={{ fontSize: 12 }}>{a.when}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const Stat = ({ label, value, delta, positive, accent }) => (
  <div className="stat">
    <div className="stat-label">{label}</div>
    <div className="stat-value" style={accent === "amber" ? { color: "var(--amber-600)" } : undefined}>{value}</div>
    {delta && <div className={"stat-delta" + (positive === false ? " down" : "")} style={accent === "amber" ? { color: "var(--amber-600)" } : undefined}>
      {positive && <Icon name="trending-up" size={12}/>}
      <span>{delta}</span>
    </div>}
  </div>
);

const PositionsList = ({ positions, onOpen }) => {
  const { t } = window.I18N.useI18n();
  return (
  <div className="fade-in">
    <div className="page-head">
      <div>
        <div className="page-eyebrow">{t.pos.eyebrow}</div>
        <h1 className="page-title">{t.pos.title}</h1>
        <div className="page-sub">{t.pos.sub}</div>
      </div>
      <button className="btn btn-primary" onClick={() => onOpen("position-new")}><Icon name="plus" size={14}/>{t.pos.newBtn}</button>
    </div>
    <div className="card">
      <table className="tbl">
        <thead>
          <tr>
            <th>{t.pos.cols.position}</th>
            <th>{t.pos.cols.dept}</th>
            <th>{t.pos.cols.openings}</th>
            <th>{t.pos.cols.candidates}</th>
            <th>{t.pos.cols.pending}</th>
            <th>{t.pos.cols.posted}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {positions.length === 0 && (
            <tr><td colSpan="7" style={{ padding: "32px 16px", textAlign: "center", color: "var(--text-muted)" }}>
              <div style={{ fontSize: 14, marginBottom: 6 }}>ยังไม่มีตำแหน่งงาน</div>
              <div style={{ fontSize: 12.5 }}>กดปุ่ม + New ด้านบนขวาเพื่อสร้างตำแหน่งใหม่</div>
            </td></tr>
          )}
          {positions.map(p => (
            <tr key={p.id} className="row-link" onClick={() => onOpen("position", p.id)}>
              <td>
                <div className="col gap-4">
                  <div style={{ fontWeight: 500 }}>{p.title}</div>
                  <div className="subtle" style={{ fontSize: 12 }}>{t.pos.reportsTo} {p.reportsTo}</div>
                </div>
              </td>
              <td className="muted">{p.department}</td>
              <td>{p.openings}</td>
              <td><span style={{ fontVariantNumeric: "tabular-nums", fontWeight: 500 }}>{p.candidates}</span></td>
              <td>{p.pendingReview > 0 ? <span className="pill pill-amber"><span className="dot"/>{p.pendingReview}</span> : <span className="muted">—</span>}</td>
              <td className="muted" style={{ fontSize: 12.5 }}>{p.posted}</td>
              <td><Icon name="chevron-right" size={14} style={{ color: "var(--text-subtle)" }}/></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
  );
};

const PositionDetail = ({ position, candidates, onOpen, onBack }) => {
  const [tab, setTab] = React.useState("overview");
  const posCandidates = candidates.filter(c => c.positionId === position.id);
  const totalWeight = Object.values(position.weights).reduce((a, b) => a + b, 0);

  return (
    <div className="fade-in">
      <div className="row gap-8 mb-12">
        <button className="btn btn-quiet btn-sm" onClick={onBack}><Icon name="arrow-right" size={12} style={{ transform: "rotate(180deg)" }}/>Back</button>
      </div>
      <div className="page-head">
        <div>
          <div className="page-eyebrow">{position.department}</div>
          <h1 className="page-title">{position.title}</h1>
          <div className="row gap-8 mt-8" style={{ fontSize: 13 }}>
            <span className="muted"><Icon name="map-pin" size={12} style={{ marginRight: 4, verticalAlign: "-2px" }}/>{position.location}</span>
            <span className="muted">·</span>
            <span className="muted">Reports to {position.reportsTo}</span>
            <span className="muted">·</span>
            <span className="pill pill-green"><span className="dot"/>{position.status}</span>
            <span className="muted">·</span>
            <span className="muted">{position.openings} {position.openings > 1 ? "openings" : "opening"}</span>
          </div>
        </div>
        <div className="row gap-8">
          <button className="btn btn-ghost" onClick={() => onOpen("position-edit", position.id)}><Icon name="edit" size={14}/>Edit</button>
          <button className="btn btn-primary" onClick={() => onOpen("upload")}><Icon name="upload" size={14}/>Upload resumes</button>
        </div>
      </div>

      <div className="tabs">
        {["overview", "rubric", "candidates"].map(t => (
          <button key={t} className={"tab " + (tab === t ? "active" : "")} onClick={() => setTab(t)}>
            {t === "overview" ? "Overview" : t === "rubric" ? "AI scoring rubric" : `Candidates (${posCandidates.length})`}
          </button>
        ))}
      </div>

      {tab === "overview" && (
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 18 }}>
          <div className="col gap-12">
            <div className="card card-pad">
              <div className="card-title mb-12">Job description</div>
              <p style={{ margin: 0, lineHeight: 1.65, color: "var(--text)" }}>{position.jd}</p>
            </div>
            <div className="card card-pad">
              <div className="card-title mb-12">KPIs the role will be measured on</div>
              <ul style={{ margin: 0, paddingLeft: 20, lineHeight: 1.8 }}>
                {position.kpis.map((k, i) => <li key={i}>{k}</li>)}
              </ul>
            </div>
            <div className="card card-pad">
              <div className="card-title mb-12">Requirements</div>
              <RequirementsBlock title="Must have" items={position.mustHave} kind="must"/>
              <div className="divider"/>
              <RequirementsBlock title="Nice to have" items={position.niceToHave} kind="nice"/>
              {position.disqualifiers.length > 0 && <>
                <div className="divider"/>
                <RequirementsBlock title="Disqualifiers" items={position.disqualifiers} kind="dq"/>
              </>}
            </div>
          </div>
          <div className="col gap-12">
            <div className="card card-pad">
              <div className="card-title mb-12">At a glance</div>
              <div className="col gap-12">
                <Field label="Skills">
                  <div className="row gap-6" style={{ flexWrap: "wrap" }}>
                    {position.skills.map((s, i) => <span key={i} className="pill pill-sand">{s}</span>)}
                  </div>
                </Field>
                <Field label="Education">{position.education}</Field>
                <Field label="Certifications">
                  {position.certifications.length === 0 ? <span className="muted">—</span> :
                    <ul style={{ margin: 0, paddingLeft: 18 }}>{position.certifications.map((c, i) => <li key={i}>{c}</li>)}</ul>}
                </Field>
                <Field label="Employment type">{position.employmentType}</Field>
              </div>
            </div>
            <div className="card card-pad">
              <div className="row gap-8 mb-12">
                <Icon name="sparkles" size={16} style={{ color: "var(--green-600)" }}/>
                <div className="card-title" style={{ margin: 0 }}>AI screening summary</div>
              </div>
              <div className="row gap-12 mb-16">
                <Stat2 label="Screened" value={position.candidates}/>
                <Stat2 label="Strong fit" value={posCandidates.filter(c => c.recommendation === "Strong fit").length}/>
                <Stat2 label="Pending" value={position.pendingReview}/>
              </div>
              <div className="banner banner-info" style={{ padding: "10px 14px", fontSize: 12.5 }}>
                <Icon name="info" size={14} className="banner-icon"/>
                <span>Average fit score for this role is <b>74</b>. Top scoring candidate: <b>Suthida Charoenwong (91)</b>.</span>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === "rubric" && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 18 }}>
          <div className="card card-pad">
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
              <div className="card-title">Scoring weights</div>
              <span className="muted" style={{ fontSize: 12 }}>Total: <b style={{ color: totalWeight === 100 ? "var(--green-700)" : "var(--rose-600)" }}>{totalWeight}%</b></span>
            </div>
            <div className="muted mb-16" style={{ fontSize: 13 }}>Adjust how each dimension contributes to the overall fit score. The AI re-scores all candidates against the new weights when you save.</div>
            <div className="col gap-16">
              {Object.entries(position.weights).map(([key, val]) => (
                <WeightRow key={key} label={WEIGHT_LABELS[key]} value={val}/>
              ))}
            </div>
            <div className="row gap-8 mt-24">
              <button className="btn btn-primary" disabled style={{ opacity: 0.5 }}>Save & re-score 47 candidates</button>
              <button className="btn btn-ghost">Reset to defaults</button>
            </div>
          </div>
          <div className="col gap-12">
            <div className="card card-pad">
              <div className="card-title mb-12">How the rubric is applied</div>
              <ol style={{ margin: 0, paddingLeft: 20, lineHeight: 1.7, fontSize: 13, color: "var(--text-muted)" }}>
                <li>AI parses the resume and extracts structured fields.</li>
                <li>Each dimension is scored 0–100 against this position's must-haves and KPIs.</li>
                <li>Weighted average produces the overall fit score.</li>
                <li>A natural-language explanation is generated for every sub-score.</li>
                <li>Disqualifiers, if present, cap the recommendation at "Not recommended".</li>
              </ol>
            </div>
            <div className="banner banner-warn">
              <Icon name="shield" size={16} className="banner-icon"/>
              <div>
                <div className="banner-title">Excluded from scoring</div>
                <div className="banner-body">Gender, age, photo, marital status, religion, race, nationality, health.</div>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === "candidates" && (
        <CandidatesTable candidates={posCandidates} positions={[position]} onOpen={onOpen} compact/>
      )}
    </div>
  );
};

const WEIGHT_LABELS = {
  experience: "Relevant work experience",
  skills: "Technical & functional skills",
  industry: "Industry / domain fit",
  leadership: "Leadership & management",
  kpi: "KPI alignment",
  stability: "Career stability",
};

const WeightRow = ({ label, value }) => {
  const [v, setV] = React.useState(value);
  return (
    <div className="col gap-6">
      <div className="row" style={{ justifyContent: "space-between" }}>
        <span style={{ fontSize: 13.5 }}>{label}</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--green-800)" }}>{v}%</span>
      </div>
      <input type="range" min="0" max="40" value={v} className="weight-slider" onChange={e => setV(+e.target.value)}/>
    </div>
  );
};

const Field = ({ label, children }) => (
  <div className="col gap-6">
    <span className="field-label">{label}</span>
    <div style={{ fontSize: 13.5 }}>{children}</div>
  </div>
);

const Stat2 = ({ label, value }) => (
  <div className="col gap-4 flex-1">
    <span className="field-label">{label}</span>
    <span style={{ fontFamily: "var(--font-serif)", fontSize: 22, fontWeight: 500, color: "var(--green-900)" }}>{value}</span>
  </div>
);

const RequirementsBlock = ({ title, items, kind }) => {
  const ICON = { must: "check", nice: "star", dq: "x" }[kind];
  const COLOR = { must: "var(--green-600)", nice: "var(--amber-500)", dq: "var(--rose-500)" }[kind];
  return (
    <div className="col gap-8">
      <div className="field-label">{title}</div>
      <div className="col gap-8">
        {items.map((it, i) => (
          <div key={i} className="row gap-10" style={{ alignItems: "flex-start" }}>
            <div style={{ width: 18, height: 18, borderRadius: 999, background: "var(--sand-100)", display: "grid", placeItems: "center", color: COLOR, flexShrink: 0, marginTop: 1 }}>
              <Icon name={ICON} size={11}/>
            </div>
            <span style={{ fontSize: 13.5, lineHeight: 1.5 }}>{it}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

window.SCREENS_A = { Dashboard, PositionsList, PositionDetail, WEIGHT_LABELS };