/* The 9-tab candidate profile modal, split out of Candidates.jsx — it was the
   single largest block in js/candidates.js and deserves its own file.

   TWO DATA MODES, selected by whether the caller passes a `userId`:

   SEED  (Candidates.jsx) — every tab renders from the seed record, exactly as
         the prototype did.
   LIVE  (TalentPool.jsx) — GET /candidate/fetch?user_id= switches the endpoint
         into detail mode and returns the real record: résumé text, the agent's
         match verdict, documents, and the four child collections (interviews,
         notes, activity, feedback). The write tabs POST to their own endpoints
         and invalidate this one query, so the whole modal repaints from a single
         refetch. History is fetched separately (GET /candidate/history/fetch)
         when that tab opens — it is append-only and not part of the detail payload.

   Live collections are NEVER padded with the seed's demo rows. An empty tab gets
   an empty state, because inventing three scorecards for a real applicant is
   worse than showing none.

   Scoping differs between the child tables and is not interchangeable: notes
   hang off the candidate (users.id), while interviews, activity and feedback
   hang off one application (inbox.id). */

import { useMemo, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'

import Modal from '../ui/Modal'
import { Tabs } from '../ui/Tabs'
import { Avatar, Badge, EmptyState, Icon, ScoreChip, Stars } from '../ui/primitives'
import { useToast } from '../ui/Toast'
import { useAuth } from '../auth/AuthContext'
import { seedQuery } from '../data/seedQueries'
import { qk } from '../lib/queryKeys'
import { friendlyAuthError } from '../lib/errors'
import * as candidatesApi from '../api/candidates'
import * as formsApi from '../api/forms'
import * as pipelineApi from '../api/pipeline'
import CandidateFormsTab from './CandidateForms'
import { companies, fmtDate, moneyK, pick } from '../data/seed'

/* Workflow order: learn (Overview, Resume, Documents) → interview (Interview,
   Forms, Feedback) → track (Notes, Activity) → audit (Timeline, History). */
const TABS = ['Overview', 'Resume', 'Documents', 'Interview', 'Forms', 'Feedback', 'Notes', 'Activity', 'Timeline', 'History']
// Forward progression for the live Advance button. Rejected has no next stage.
const KANBAN_ORDER = ['Shortlist', 'Screening', 'Assessment', 'Interview', 'Offer', 'Hired']
const LABEL = { fontSize: 12, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', marginBottom: 8 }
const REVIEWS = ['Strong Hire', 'Hire', 'Lean Hire', 'No Hire']
const INTERVIEW_TYPES = ['Phone Screen', 'Technical', 'System Design', 'Culture Fit', 'Final Round']
const INTERVIEW_STATES = ['Scheduled', 'Completed', 'Cancelled', 'No Show']
const ACTIVITY_TYPES = ['Call', 'Email', 'Meeting', 'Screening', 'Assessment', 'Note']

/** Seed timestamps are Date objects; the API sends ISO strings. */
function fmtWhen(value, fallback = '—') {
  if (!value) return fallback
  const d = value instanceof Date ? value : new Date(value)
  return Number.isNaN(d.getTime()) ? String(value) : fmtDate(d)
}

function fmtClock(value) {
  if (!value) return null
  const d = new Date(value)
  return Number.isNaN(d.getTime()) ? null : d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
}

function stamp(value) {
  const d = value instanceof Date ? value : new Date(value ?? NaN)
  return Number.isNaN(d.getTime()) ? 0 : d.getTime()
}

/** <input type="date"> + <input type="time"> -> one ISO instant, or null. */
function toInstant(date, time) {
  if (!date) return null
  const d = new Date(`${date}T${time || '00:00'}`)
  return Number.isNaN(d.getTime()) ? null : d.toISOString()
}

function Info({ label, val }) {
  return (
    <div className="info-item">
      <div className="il">{label}</div>
      <div className="iv">{val === 0 || val ? val : '—'}</div>
    </div>
  )
}

function useCandidateDetail(userId) {
  return useQuery({
    queryKey: qk.candidates.detail(userId),
    queryFn: async () => candidatesApi.toRows(await candidatesApi.getByUserId(userId))[0] ?? null,
    enabled: Boolean(userId),
  })
}

/**
 * A write against one of the child endpoints. Every one of them invalidates the
 * single detail query the modal renders from, so a saved note and a submitted
 * scorecard both land through the same refetch rather than through hand-patched
 * cache entries that could drift from the server's view.
 */
function useProfileWrite({ userId, mutationFn, success, onDone }) {
  const qc = useQueryClient()
  const { toast } = useToast()
  return useMutation({
    mutationFn,
    onSuccess: async (_data, vars) => {
      await qc.invalidateQueries({ queryKey: qk.candidates.detail(userId) })
      await qc.invalidateQueries({ queryKey: ['candidates', 'history', userId] })
      toast(typeof success === 'function' ? success(vars) : success, 'success')
      onDone?.()
    },
    onError: (err) => toast(friendlyAuthError(err, 'Could not save. Please try again.'), 'error'),
  })
}

/**
 * `atsScore` / `recommendation` are the CURRENT ats_results row, fetched by the
 * caller (Talent Pool reads GET /pipeline/candidate/score/fetch on card click).
 * They are optional: a caller that does not fetch it passes nothing and the hero
 * falls back to the detail payload's denormalised ai_score, then to the row's.
 * When present they WIN, because ats_results is the source the denorm copies.
 */
export default function CandidateProfile({
  candidate: c, atsScore = null, recommendation = null, onClose, onAdvance, onToggleFav, onAtsMatch,
  variant = 'modal',
}) {
  const { toast } = useToast()
  const { can } = useAuth()
  const [tab, setTab] = useState('Overview')
  const { data: interviews = [] } = useQuery(seedQuery('interviews'))
  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))

  const isLive = Boolean(c.userId)
  const detail = useCandidateDetail(c.userId)
  const live = detail.data ?? null

  // The prototype called DB.pick() inline while rendering, so the "previous
  // employer" changed every repaint. Fixed per candidate.
  const priorCompany = useMemo(() => pick(companies), [])

  const candidateInterviews = interviews.filter((i) => i.candidateId === c.id)

  // The application row interviews/activity/feedback attach to. Detail mode
  // flattens every application the candidate owns; writes land on the first,
  // which is the one the header is describing.
  const inboxId = live?.inbox_id ?? null

  // Same key as the Forms tab's own query, so the tab count and the tab body
  // share one fetch. Fetching is not stage-gated (only creating is). Manual
  // candidates key by their manual_upload_candidate row instead of inbox.
  const manualFormsId = !inboxId ? (live?.manual_upload_candidate_id ?? null) : null
  const formsParams = inboxId ? { inboxId } : { manualUploadCandidateId: manualFormsId }
  const formsQuery = useQuery({
    queryKey: qk.forms.list(formsParams),
    queryFn: () => formsApi.list(formsParams),
    enabled: isLive && Boolean(inboxId || manualFormsId) && can('interviews.view'),
  })

  const favorite = live ? Boolean(live.favorite) : c.favorite
  const setFavorite = useProfileWrite({
    userId: c.userId,
    mutationFn: (next) => candidatesApi.update(c.userId, { favorite: next }),
    success: (next) => (next ? `${c.name} added to favorites` : 'Removed from favorites'),
  })

  // Same PATCH as favorite: the server writes rating onto every inbox row the
  // candidate owns and returns the refreshed detail payload.
  const rating = Number(live?.rating ?? 0)
  const setRating = useProfileWrite({
    userId: c.userId,
    mutationFn: (next) => candidatesApi.update(c.userId, { rating: next }),
    success: (next) => `Rating saved — ${next}/5`,
  })

  // Score the candidate's inbox CV against the assigned job with the ATS engine.
  // Needs both an assigned job (what to score against) and a message (whose
  // attachment to score); the refetch lands the new ai_score in this modal.
  const canScoreAts = isLive && Boolean(live?.assigned_job_post_id && live?.message_id)
  const scoreAts = useProfileWrite({
    userId: c.userId,
    mutationFn: () => candidatesApi.scoreInbox(live.assigned_job_post_id, [live.message_id]),
    success: 'CV scored against the assigned job',
  })

  const title = live?.job_title || c.currentTitle
  const company = live?.currentCompany || c.currentCompany

  // Live stage comes from the application record, not from whatever card
  // opened the modal — c.stage goes stale the moment the stage moves.
  const rawStatus = String(live?.application_status || '').toUpperCase()
  const stageLabel = isLive
    ? (pipelineApi.STAGE_FROM_STATUS[rawStatus] ?? 'Shortlist')
    : c.stage
  const stageIdx = KANBAN_ORDER.indexOf(stageLabel)
  const nextStage = stageIdx >= 0 && stageIdx < KANBAN_ORDER.length - 1
    ? KANBAN_ORDER[stageIdx + 1]
    : null

  // The REAL stage move (PATCH /candidate/stage) — the seed-only onAdvance walk
  // is kept for seed candidates only. Requires pipeline.edit server-side.
  const qc = useQueryClient()
  const advanceLive = useProfileWrite({
    userId: c.userId,
    mutationFn: () => pipelineApi.changeStage({
      inboxId: live?.inbox_id ?? undefined,
      manualUploadId: live?.inbox_id ? undefined : (live?.manual_upload_candidate_id ?? undefined),
      toStage: pipelineApi.STATUS_FROM_STAGE[nextStage],
      changeReason: 'advanced from candidate profile',
    }),
    success: () => `Moved to ${nextStage}`,
    onDone: () => {
      qc.invalidateQueries({ queryKey: qk.pipeline.all() })
      qc.invalidateQueries({ queryKey: qk.forms.all() })
    },
  })

  // The hero experience chip: live experience is free text ("6 years"), seed is
  // a number. Render nothing rather than a bare "yrs exp".
  const expRaw = live?.experience ?? c.experience
  const expChip = expRaw == null || expRaw === ''
    ? null
    : Number.isFinite(Number(expRaw)) ? `${expRaw} yrs exp` : String(expRaw)

  const counts = live && {
    Interview: live.interviews?.length ?? 0,
    Forms: formsQuery.data?.total ?? 0,
    Notes: live.notes?.length ?? 0,
    Activity: live.activity?.length ?? 0,
    Documents: live.documents?.length ?? 0,
    Feedback: live.feedback?.length ?? 0,
  }

  // In live mode nothing below the hero can be trusted until the detail payload
  // lands, so one guard replaces every tab body rather than each tab inventing
  // its own half-loaded state.
  const guard = !isLive ? null
    : detail.isPending ? (
      <EmptyState icon="refresh" title="Loading candidate…">Fetching the full record.</EmptyState>
    ) : detail.isError ? (
      <EmptyState icon="alert" title="Could not load this candidate">
        {friendlyAuthError(detail.error, 'Please try again.')}
      </EmptyState>
    ) : !live ? (
      <EmptyState icon="user" title="No record found">This candidate is no longer in the pipeline.</EmptyState>
    ) : null

  const actions = (
    <>
      <button
        className={`btn btn-ghost star-btn${favorite ? ' on' : ''}`}
        style={{ marginRight: 'auto' }}
        disabled={isLive && (setFavorite.isPending || !live)}
        onClick={() => (isLive ? setFavorite.mutate(!favorite) : onToggleFav(c))}
      >
        <Icon name="star" /> {favorite ? 'Favorited' : 'Favorite'}
      </button>
      {canScoreAts && (
        <button
          className="btn btn-secondary"
          disabled={scoreAts.isPending}
          onClick={() => scoreAts.mutate()}
        >
          <Icon name="sparkles" /> {scoreAts.isPending ? 'Scoring…' : 'Score with ATS'}
        </button>
      )}
      {onAtsMatch && (
        <button className="btn btn-secondary" onClick={() => onAtsMatch(c)}>
          <Icon name="target" /> ATS Match
        </button>
      )}
      {isLive ? (
        <button
          className="btn btn-primary"
          disabled={!live || !nextStage || advanceLive.isPending || !can('pipeline.edit')}
          data-tip={!can('pipeline.edit') ? 'Needs pipeline.edit' : undefined}
          onClick={() => advanceLive.mutate()}
        >
          <Icon name="check" />{' '}
          {advanceLive.isPending
            ? 'Moving…'
            : nextStage ? `Advance to ${nextStage}`
            : stageLabel === 'Rejected' ? 'Rejected' : 'Pipeline complete'}
        </button>
      ) : (
        <button className="btn btn-primary" onClick={() => { onAdvance(c); onClose() }}>
          <Icon name="check" /> Advance Stage
        </button>
      )}
    </>
  )

  const body = (
    <>
      <div className="profile-hero">
        <Avatar name={live?.name || c.name} initials={c.initials} color={c.color} className="avatar-lg" />
        <div style={{ flex: 1 }}>
          <div className="ph-name">{live?.name || c.name}</div>
          <div className="ph-role">{company ? `${title} at ${company}` : title}</div>
          <div className="ph-tags">
            {stageLabel && <Badge>{stageLabel}</Badge>}{' '}
            {(live?.source || c.source) && <Badge className="b-gray">{live?.source || c.source}</Badge>}
            {expChip && <span className="badge b-plain b-indigo badge-plain">{expChip}</span>}
          </div>
        </div>
        {/* No score anywhere -> the whole block goes, rather than a ring drawn
            around a blank. Seed-backed callers still pass a number and are
            unaffected; only live candidates the engine never scored drop out. */}
        {(atsScore ?? live?.ai_score ?? c.aiScore) != null && (
          <div style={{ textAlign: 'center' }}>
            <ScoreChip score={atsScore ?? live?.ai_score ?? c.aiScore} />
            {/* The band caption replaces the static label only when the caller
                actually fetched one — every other screen keeps "AI Match". */}
            <div className="cell-sub" style={{ marginTop: 4 }}>{recommendation || 'AI Match'}</div>
          </div>
        )}
      </div>

      <div style={{ marginTop: 22 }}>
        <Tabs
          value={tab}
          onChange={setTab}
          className="tabs tabs-wrap"
          tabs={TABS.map((t) => ({ key: t, label: t, count: counts ? counts[t] : undefined }))}
        />
      </div>

      <div className="tab-pane active">
        {tab === 'Overview' && (guard || (live ? (
          <>
            <div className="info-grid" style={{ marginBottom: 20 }}>
              <Info label="Email" val={live.email} />
              <Info label="Phone" val={live.phone} />
              <Info label="Applied For" val={live.job_title} />
              <Info label="Current Company" val={live.currentCompany} />
              <Info label="Experience" val={live.experience} />
              <Info label="Education" val={live.education} />
              <Info label="Source" val={live.source} />
              <Info label="Recruiter" val={live.recruiter} />
              <Info label="Applied On" val={fmtWhen(live.applied)} />
              <Info label="Screened On" val={fmtWhen(live.matched_at)} />
              <div className="info-item">
                <div className="il">Rating</div>
                <div className="iv flex items-center gap-8">
                  <Stars
                    value={Math.round(rating)}
                    disabled={setRating.isPending}
                    onChange={(n) => setRating.mutate(n)}
                  />
                  <span className="cell-sub">{rating ? `${rating.toFixed(1)} / 5.0` : 'Not rated'}</span>
                </div>
              </div>
              <Info label="Applications" val={live.job_posts?.length || 0} />
            </div>

            {(live.match_summary || live.match_reasoning) && (
              <>
                <div style={LABEL}>AI Screening</div>
                <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)', marginBottom: 18 }}>
                  <div className="card-body">
                    {live.match_summary && <p style={{ marginBottom: live.match_reasoning ? 10 : 0 }}>{live.match_summary}</p>}
                    {live.match_reasoning && <p className="text-muted text-sm">{live.match_reasoning}</p>}
                  </div>
                </div>
              </>
            )}

            {live.assigned_job_post && (
              <>
                <div style={LABEL}>Assigned Role</div>
                <div className="k-tags" style={{ marginBottom: 14 }}>
                  <span className="tag" style={{ background: 'var(--primary-soft)', color: 'var(--primary-fg)' }}>
                    {live.assigned_job_post.title}
                  </span>
                </div>
              </>
            )}

            {live.job_posts?.length > 0 && (
              <>
                <div style={LABEL}>Suggested Roles</div>
                <div className="k-tags">
                  {live.job_posts.map((j) => <span className="tag" key={j.id}>{j.title}</span>)}
                </div>
              </>
            )}
          </>
        ) : (
          <>
            <div className="info-grid" style={{ marginBottom: 20 }}>
              <Info label="Email" val={c.email} />
              <Info label="Phone" val={c.phone} />
              <Info label="Location" val={c.location} />
              <Info label="Applied For" val={c.jobTitle} />
              <Info label="Current Company" val={c.currentCompany} />
              <Info label="Experience" val={`${c.experience} years`} />
              <Info label="Education" val={c.education} />
              <Info label="Source" val={c.source} />
              <Info label="Recruiter" val={c.recruiter} />
              <Info label="Applied On" val={fmtWhen(c.applied)} />
              <Info label="Expected Salary" val={moneyK(c.salary)} />
              <Info label="Rating" val={`⭐ ${c.rating} / 5.0`} />
            </div>
            <div style={LABEL}>Skills</div>
            <div className="k-tags">{c.skills.map((s) => <span className="tag" key={s}>{s}</span>)}</div>
          </>
        )))}

        {tab === 'Resume' && (guard || (live ? (
          <ResumeTab live={live} />
        ) : (
          <>
            <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)' }}>
              <div className="card-body">
                <h3 style={{ marginBottom: 4 }}>{c.name}</h3>
                <p className="text-muted">{c.currentTitle} · {c.location}</p>
                <div className="divider" />
                <div className="form-section-title" style={{ marginTop: 0 }}>Summary</div>
                <p className="text-muted">
                  Results-driven {c.currentTitle.toLowerCase()} with {c.experience} years of experience
                  across {c.department.toLowerCase()}. Passionate about building high-quality products
                  and collaborating with cross-functional teams.
                </p>
                <div className="form-section-title">Experience</div>
                <div className="info-item">
                  <div className="iv">{c.currentTitle} — {c.currentCompany}</div>
                  <div className="il" style={{ textTransform: 'none' }}>2021 – Present</div>
                </div>
                <div className="info-item" style={{ marginTop: 10 }}>
                  <div className="iv">Associate — {priorCompany}</div>
                  <div className="il" style={{ textTransform: 'none' }}>2018 – 2021</div>
                </div>
                <div className="form-section-title">Education</div>
                <div className="iv">{c.education}</div>
              </div>
            </div>
            <button className="btn btn-secondary" style={{ marginTop: 14 }} onClick={() => toast('Downloading resume.pdf', 'info')}>
              <Icon name="download" /> Download PDF
            </button>
          </>
        )))}

        {tab === 'Timeline' && (guard || (live ? (
          <TimelineTab live={live} />
        ) : (
          <div className="timeline">
            {[
              { icon: 'user-plus', title: 'Application received', meta: fmtDate(c.applied), desc: `Applied via ${c.source}` },
              { icon: 'star', title: 'AI screening completed', meta: '1 day later', desc: `Match score: ${c.aiScore}%` },
              { icon: 'phone', title: 'Recruiter screen', meta: '3 days later', desc: `Call with ${c.recruiter}` },
              { icon: 'calendar', title: 'Technical interview', meta: '1 week later', desc: 'Panel of 3 interviewers' },
              { icon: 'check', title: `Moved to ${c.stage}`, meta: 'Recently', desc: 'Current stage in pipeline' },
            ].map((e) => (
              <div className="tl-item" key={e.title}>
                <div className="tl-dot"><Icon name={e.icon} /></div>
                <div className="tl-title">{e.title}</div>
                <div className="tl-meta">{e.meta}</div>
                <div className="tl-desc">{e.desc}</div>
              </div>
            ))}
          </div>
        )))}

        {tab === 'History' && (guard || (live ? (
          <HistoryTab userId={c.userId} />
        ) : (
          <EmptyState icon="clock" title="No history">
            Audit history is recorded for live candidates only.
          </EmptyState>
        )))}

        {tab === 'Interview' && (guard || (live ? (
          <InterviewTab userId={c.userId} inboxId={inboxId} rows={live.interviews ?? []} />
        ) : (
          candidateInterviews.length ? (
            <div className="list-tight">
              {candidateInterviews.map((iv) => (
                <div className="list-row" key={iv.id}>
                  <span className="kpi-icn i-blue" style={{ width: 38, height: 38, borderRadius: 10 }}>
                    <Icon name="calendar" />
                  </span>
                  <div className="lr-main">
                    <div className="lr-title">{iv.type}</div>
                    <div className="lr-sub">{fmtDate(iv.when)} · {iv.meeting}</div>
                  </div>
                  <div className="lr-right"><Badge>{iv.status}</Badge></div>
                </div>
              ))}
            </div>
          ) : (
            <EmptyState icon="calendar" title="No interviews scheduled">
              Schedule an interview to get started.
            </EmptyState>
          )
        )))}

        {tab === 'Forms' && (guard || (live ? (
          <CandidateFormsTab userId={c.userId} live={live} />
        ) : (
          <EmptyState icon="file" title="Live candidates only">
            Hiring forms attach to real applications.
          </EmptyState>
        )))}

        {tab === 'Notes' && (guard || (live ? (
          <NotesTab userId={c.userId} rows={live.notes ?? []} />
        ) : (
          <>
            <div className="form-field">
              <label>Add a note</label>
              <textarea placeholder="Write a private note about this candidate…" />
            </div>
            <button className="btn btn-primary btn-sm" style={{ margin: '10px 0 18px' }} onClick={() => toast('Note saved', 'success')}>
              <Icon name="plus" /> Add Note
            </button>
            <div className="list-tight">
              <div className="list-row">
                <Avatar name={c.recruiter} />
                <div className="lr-main">
                  <div className="lr-title">{c.recruiter}</div>
                  <div className="lr-sub" style={{ color: 'var(--text-2)' }}>
                    Strong communication skills, great culture fit. Recommend advancing.
                  </div>
                  <div className="lr-sub">2 days ago</div>
                </div>
              </div>
              <div className="list-row">
                <Avatar name="Asfand Ahmed" initials="AA" />
                <div className="lr-main">
                  <div className="lr-title">Asfand Ahmed</div>
                  <div className="lr-sub" style={{ color: 'var(--text-2)' }}>
                    Reviewed portfolio — impressive work. Schedule technical round.
                  </div>
                  <div className="lr-sub">4 days ago</div>
                </div>
              </div>
            </div>
          </>
        )))}

        {tab === 'Activity' && (guard || (live ? (
          <ActivityTab userId={c.userId} inboxId={inboxId} rows={live.activity ?? []} />
        ) : (
          <div className="list-tight">
            {[
              { icon: 'eye', tone: 'i-green', text: `Profile viewed by ${c.recruiter}`, when: '1h ago' },
              { icon: 'mail', tone: 'i-blue', text: 'Email sent: Interview invitation', when: '1 day ago' },
              { icon: 'star', tone: 'i-amber', text: `Assessment score updated to ${c.aiScore}%`, when: '2 days ago' },
              { icon: 'user-plus', tone: 'i-purple', text: `Applied for ${c.jobTitle}`, when: fmtDate(c.applied) },
            ].map((a) => (
              <div className="list-row" key={a.text}>
                <span className={`kpi-icn ${a.tone}`} style={{ width: 34, height: 34, borderRadius: 9 }}>
                  <Icon name={a.icon} />
                </span>
                <div className="lr-main">
                  <div className="lr-sub" style={{ color: 'var(--text-2)', fontSize: 13 }}>{a.text}</div>
                  <div className="lr-sub">{a.when}</div>
                </div>
              </div>
            ))}
          </div>
        )))}

        {tab === 'Documents' && (guard || (live ? (
          <DocumentsTab rows={live.documents ?? []} inboxId={inboxId} />
        ) : (
          <div className="list-tight">
            {[
              { n: 'Resume.pdf', s: '284 KB' }, { n: 'Cover_Letter.pdf', s: '112 KB' },
              { n: 'Portfolio.pdf', s: '4.2 MB' }, { n: 'References.docx', s: '48 KB' },
            ].map((d) => (
              <div className="list-row" key={d.n}>
                <span className="kpi-icn i-red" style={{ width: 38, height: 38, borderRadius: 10 }}>
                  <Icon name="file" />
                </span>
                <div className="lr-main"><div className="lr-title">{d.n}</div><div className="lr-sub">{d.s}</div></div>
                <button className="act-btn" onClick={() => toast(`Downloading ${d.n}`, 'info')}>
                  <Icon name="download" />
                </button>
              </div>
            ))}
          </div>
        )))}

        {tab === 'Feedback' && (guard || (live ? (
          <FeedbackTab userId={c.userId} inboxId={inboxId} rows={live.feedback ?? []} />
        ) : (
          <>
            <div className="list-tight">
              {['Strong Hire', 'Hire', 'Lean Hire'].map((score, i) => {
                const r = recruiters[i]
                if (!r) return null
                const notes = [
                  'Excellent technical depth and clear communication.',
                  'Good problem solving, would benefit from more system design exposure.',
                  'Solid candidate, positive team energy.',
                ]
                return (
                  <div className="list-row" key={score}>
                    <Avatar name={r.name} initials={r.initials} color={r.color} />
                    <div className="lr-main">
                      <div className="lr-title">{r.name}</div>
                      <div className="lr-sub" style={{ color: 'var(--text-2)' }}>{notes[i]}</div>
                    </div>
                    <div className="lr-right"><Badge>{score}</Badge></div>
                  </div>
                )
              })}
            </div>
            <button className="btn btn-primary btn-sm" style={{ marginTop: 14 }} onClick={() => toast('Scorecard form opened', 'info')}>
              <Icon name="plus" /> Submit Scorecard
            </button>
          </>
        )))}
      </div>
    </>
  )

  if (variant === 'page') {
    return (
      <div className="cand-page">
        <div className="cand-page-bar">
          <button className="btn btn-secondary btn-sm" onClick={onClose}>
            <Icon name="chevron-left" /> Back
          </button>
          <div className="cand-page-crumb">
            Candidates <span>/</span> <strong>{live?.name || c.name || '…'}</strong>
          </div>
          <div className="cand-page-actions">{actions}</div>
        </div>
        <div className="card">
          <div className="card-body">{body}</div>
        </div>
      </div>
    )
  }

  return (
    <Modal title="Candidate Profile" subtitle={c.id} size="modal-lg" onClose={onClose} footer={actions}>
      {body}
    </Modal>
  )
}

/* ------------------------------------------------------------------
   Live tabs. Each owns its own form state and its own write, so a half-typed
   note is not held by the modal shell and does not survive a tab switch.
   ------------------------------------------------------------------ */

function ResumeTab({ live }) {
  const source = live.documents?.[0]?.name
  if (!live.resume_text) {
    return (
      <EmptyState icon="file" title="No résumé text">
        {source
          ? `${source} is attached but has not been parsed yet — run the match to extract it.`
          : 'This candidate applied without an attachment we could read.'}
      </EmptyState>
    )
  }
  return (
    <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)' }}>
      <div className="card-body">
        <h3 style={{ marginBottom: 4 }}>{live.name}</h3>
        <p className="text-muted">
          {source ? `Extracted from ${source}` : 'Extracted from the application email'}
        </p>
        <div className="divider" />
        <div className="text-sm" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>{live.resume_text}</div>
      </div>
    </div>
  )
}

function TimelineTab({ live }) {
  const events = useMemo(() => {
    const out = []
    if (live.applied) {
      out.push({
        icon: 'user-plus',
        title: 'Application received',
        at: live.applied,
        desc: live.source ? `Applied via ${live.source}` : null,
      })
    }
    if (live.matched_at) {
      out.push({
        icon: 'sparkles',
        title: 'AI screening completed',
        at: live.matched_at,
        desc: live.match_error || live.match_summary || live.match_status,
      })
    }
    for (const iv of live.interviews ?? []) {
      out.push({
        icon: 'calendar',
        title: iv.interview_type || 'Interview',
        at: iv.interview_date,
        desc: iv.interview_status,
      })
    }
    for (const a of live.activity ?? []) {
      out.push({
        icon: 'zap',
        title: a.activity_type || 'Activity',
        at: a.activity_date,
        desc: a.description || a.activity_status,
      })
    }
    for (const f of live.feedback ?? []) {
      out.push({
        icon: 'star',
        title: f.review ? `Feedback: ${f.review}` : 'Feedback submitted',
        at: f.created_at,
        desc: f.reviewed_by_name ? `by ${f.reviewed_by_name}` : f.note,
      })
    }
    return out.sort((a, b) => stamp(a.at) - stamp(b.at))
  }, [live])

  if (!events.length) {
    return <EmptyState icon="clock" title="Nothing recorded yet">Activity appears here as the candidate moves.</EmptyState>
  }

  return (
    <div className="timeline">
      {events.map((e, i) => (
        <div className="tl-item" key={`${e.title}-${i}`}>
          <div className="tl-dot"><Icon name={e.icon} /></div>
          <div className="tl-title">{e.title}</div>
          <div className="tl-meta">{fmtWhen(e.at)}</div>
          {e.desc && <div className="tl-desc">{e.desc}</div>}
        </div>
      ))}
    </div>
  )
}

const HISTORY_ICON = {
  'stage.changed': { icon: 'arrow-right', tone: 'i-indigo' },
  'note.created': { icon: 'edit', tone: 'i-blue' },
  'note.updated': { icon: 'edit', tone: 'i-blue' },
  'feedback.created': { icon: 'award', tone: 'i-teal' },
  'feedback.updated': { icon: 'award', tone: 'i-teal' },
  'interview.created': { icon: 'calendar', tone: 'i-purple' },
  'interview.updated': { icon: 'calendar', tone: 'i-purple' },
  'calendar.created': { icon: 'send', tone: 'i-purple' },
  'calendar.rescheduled': { icon: 'clock', tone: 'i-amber' },
  'calendar.cancelled': { icon: 'x-circle', tone: 'i-red' },
  'favorite.changed': { icon: 'star', tone: 'i-amber' },
  'rating.changed': { icon: 'star', tone: 'i-amber' },
  'candidate.created': { icon: 'user-plus', tone: 'i-green' },
  'candidate.imported': { icon: 'upload', tone: 'i-green' },
  'document.uploaded': { icon: 'paperclip', tone: 'i-red' },
  'ats.scored': { icon: 'sparkles', tone: 'i-blue' },
}

const HISTORY_TITLE = {
  'stage.changed': 'Stage changed',
  'note.created': 'Note added',
  'note.updated': 'Note updated',
  'feedback.created': 'Feedback submitted',
  'feedback.updated': 'Feedback updated',
  'interview.created': 'Interview scheduled',
  'interview.updated': 'Interview updated',
  'calendar.created': 'Calendar invite sent',
  'calendar.rescheduled': 'Calendar rescheduled',
  'calendar.cancelled': 'Calendar cancelled',
  'favorite.changed': 'Favorite updated',
  'rating.changed': 'Rating updated',
  'candidate.created': 'Candidate created',
  'candidate.imported': 'Candidate imported',
  'document.uploaded': 'Document uploaded',
  'ats.scored': 'ATS scored',
}

function historyDayLabel(value) {
  const d = value instanceof Date ? value : new Date(value ?? NaN)
  if (Number.isNaN(d.getTime())) return 'Unknown'
  const today = new Date()
  const yday = new Date()
  yday.setDate(today.getDate() - 1)
  const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
  if (sameDay(d, today)) return 'Today'
  if (sameDay(d, yday)) return 'Yesterday'
  return fmtDate(d)
}

function HistoryTab({ userId }) {
  const [limit, setLimit] = useState(200)
  const q = useQuery({
    queryKey: qk.candidates.history(userId, { limit }),
    queryFn: async () => {
      const res = await candidatesApi.listHistory(userId, { limit })
      return { rows: res?.data ?? [], total: res?.total ?? 0 }
    },
    enabled: Boolean(userId),
  })

  if (q.isPending) {
    return <EmptyState icon="refresh" title="Loading history…">Fetching the audit trail.</EmptyState>
  }
  if (q.isError) {
    return (
      <EmptyState icon="alert" title="Could not load history">
        {friendlyAuthError(q.error, 'Please try again.')}
      </EmptyState>
    )
  }

  const rows = q.data?.rows ?? []
  const total = q.data?.total ?? 0
  if (!rows.length) {
    return <EmptyState icon="clock" title="No history yet">Actions on this candidate will appear here.</EmptyState>
  }

  const groups = []
  for (const r of rows) {
    const label = historyDayLabel(r.created_at)
    const last = groups[groups.length - 1]
    if (!last || last.label !== label) groups.push({ label, rows: [r] })
    else last.rows.push(r)
  }

  return (
    <>
      {groups.map((g) => (
        <div key={g.label} style={{ marginBottom: 18 }}>
          <div style={LABEL}>{g.label}</div>
          <div className="list-tight">
            {g.rows.map((r) => <HistoryRow key={r.id} row={r} />)}
          </div>
        </div>
      ))}
      {total > rows.length && (
        <button className="btn btn-secondary btn-sm" style={{ marginTop: 8 }} onClick={() => setLimit((n) => n + 200)}>
          Load more
        </button>
      )}
    </>
  )
}

function HistoryRow({ row: r }) {
  const look = HISTORY_ICON[r.event_type] || { icon: 'clock', tone: 'i-blue' }
  const title = HISTORY_TITLE[r.event_type] || r.event_type
  const change = [r.from_value, r.to_value].some((v) => v != null && v !== '')
    ? `${r.from_value ?? '—'} → ${r.to_value ?? '—'}`
    : null
  const actor = r.actor_name || (r.actor_id ? 'Unknown' : 'System')
  const when = [fmtWhen(r.created_at), fmtClock(r.created_at)].filter(Boolean).join(' · ')
  return (
    <div className="list-row">
      <span className={`kpi-icn ${look.tone}`} style={{ width: 38, height: 38, borderRadius: 10 }}>
        <Icon name={look.icon} />
      </span>
      <div className="lr-main">
        <div className="lr-title">{title}</div>
        {change && <div className="lr-sub">{change}</div>}
        {r.description && <div className="lr-sub" style={{ color: 'var(--text-2)' }}>{r.description}</div>}
        <div className="lr-sub">{actor} · {when}</div>
      </div>
      <div className="lr-right">
        {r.actor_name || r.actor_id
          ? <Avatar name={actor} />
          : <Badge className="b-gray">System</Badge>}
      </div>
    </div>
  )
}

function InterviewTab({ userId, inboxId, rows }) {
  const { toast } = useToast()
  const [form, setForm] = useState({ type: INTERVIEW_TYPES[0], date: '', time: '', status: INTERVIEW_STATES[0] })
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }))

  const create = useProfileWrite({
    userId,
    // interviews.interview_date and .interview_time are BOTH datetime columns,
    // so the same instant goes to each rather than inventing a second one.
    mutationFn: (instant) => candidatesApi.createInterview({
      inboxId, date: instant, time: instant, type: form.type, status: form.status,
    }),
    success: 'Interview scheduled',
    onDone: () => setForm({ type: INTERVIEW_TYPES[0], date: '', time: '', status: INTERVIEW_STATES[0] }),
  })

  function submit() {
    const instant = toInstant(form.date, form.time)
    if (!instant) {
      toast('Pick a date for the interview', 'warning')
      return
    }
    create.mutate(instant)
  }

  return (
    <>
      {rows.length ? (
        <div className="list-tight">
          {rows.map((iv) => {
            const clock = fmtClock(iv.interview_time)
            return (
              <div className="list-row" key={iv.id}>
                <span className="kpi-icn i-blue" style={{ width: 38, height: 38, borderRadius: 10 }}>
                  <Icon name="calendar" />
                </span>
                <div className="lr-main">
                  <div className="lr-title">{iv.interview_type || 'Interview'}</div>
                  <div className="lr-sub">{fmtWhen(iv.interview_date)}{clock ? ` · ${clock}` : ''}</div>
                </div>
                <div className="lr-right">
                  {iv.interview_status ? <Badge>{iv.interview_status}</Badge> : null}
                </div>
              </div>
            )
          })}
        </div>
      ) : (
        <EmptyState icon="calendar" title="No interviews scheduled">
          Schedule the first round below.
        </EmptyState>
      )}

      <div className="divider" />
      <div className="form-section-title" style={{ marginTop: 0 }}>Schedule an interview</div>
      <div className="form-grid">
        <div className="form-field">
          <label>Type</label>
          <select value={form.type} onChange={(e) => set('type', e.target.value)}>
            {INTERVIEW_TYPES.map((t) => <option key={t}>{t}</option>)}
          </select>
        </div>
        <div className="form-field">
          <label>Status</label>
          <select value={form.status} onChange={(e) => set('status', e.target.value)}>
            {INTERVIEW_STATES.map((s) => <option key={s}>{s}</option>)}
          </select>
        </div>
        <div className="form-field">
          <label>Date</label>
          <input type="date" value={form.date} onChange={(e) => set('date', e.target.value)} />
        </div>
        <div className="form-field">
          <label>Time</label>
          <input type="time" value={form.time} onChange={(e) => set('time', e.target.value)} />
        </div>
      </div>
      <button
        className="btn btn-primary btn-sm"
        style={{ marginTop: 10 }}
        disabled={!inboxId || create.isPending}
        onClick={submit}
      >
        <Icon name="plus" /> {create.isPending ? 'Scheduling…' : 'Schedule Interview'}
      </button>
      {!inboxId && (
        <p className="text-muted" style={{ marginTop: 8, fontSize: 12.5 }}>
          Interview records attach to an email application — this candidate was added
          manually, so scheduling is unavailable here.
        </p>
      )}
    </>
  )
}

function NotesTab({ userId, rows }) {
  const [text, setText] = useState('')
  const create = useProfileWrite({
    userId,
    mutationFn: () => candidatesApi.createNote({ userId, note: text.trim() }),
    success: 'Note saved',
    onDone: () => setText(''),
  })

  return (
    <>
      <div className="form-field">
        <label>Add a note</label>
        <textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Write a private note about this candidate…"
        />
      </div>
      <button
        className="btn btn-primary btn-sm"
        style={{ margin: '10px 0 18px' }}
        disabled={!text.trim() || create.isPending}
        onClick={() => create.mutate()}
      >
        <Icon name="plus" /> {create.isPending ? 'Saving…' : 'Add Note'}
      </button>

      {rows.length ? (
        <div className="list-tight">
          {rows.map((n) => <NoteRow key={n.id} note={n} userId={userId} />)}
        </div>
      ) : (
        <EmptyState icon="edit" title="No notes yet">The first note on this candidate goes above.</EmptyState>
      )}
    </>
  )
}

/**
 * One note, editable in place via PATCH /notes/update.
 *
 * Editing is offered only on the signed-in user's OWN notes. The route does not
 * check authorship and does not reassign `created_by`, so anyone with
 * candidates.edit could silently rewrite a colleague's words under that
 * colleague's name. Gating it here is the honest read of what the endpoint does.
 */
function NoteRow({ note: n, userId }) {
  const { user } = useAuth()
  const [editing, setEditing] = useState(false)
  const [text, setText] = useState(n.note ?? '')

  const mine = Boolean(user?.id && n.created_by && String(user.id) === String(n.created_by))

  const save = useProfileWrite({
    userId,
    mutationFn: () => candidatesApi.updateNote(n.id, text.trim()),
    success: 'Note updated',
    onDone: () => setEditing(false),
  })

  if (editing) {
    return (
      <div className="list-row" style={{ alignItems: 'flex-start' }}>
        <Avatar name={n.created_by_name || 'Unknown'} />
        <div className="lr-main">
          <div className="form-field" style={{ marginBottom: 8 }}>
            <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} />
          </div>
          <div className="flex items-center gap-8">
            <button
              className="btn btn-primary btn-sm"
              disabled={!text.trim() || save.isPending}
              onClick={() => save.mutate()}
            >
              {save.isPending ? 'Saving…' : 'Save'}
            </button>
            <button
              className="btn btn-secondary btn-sm"
              disabled={save.isPending}
              onClick={() => { setText(n.note ?? ''); setEditing(false) }}
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="list-row">
      <Avatar name={n.created_by_name || 'Unknown'} />
      <div className="lr-main">
        <div className="lr-title">{n.created_by_name || 'Unknown author'}</div>
        <div className="lr-sub" style={{ color: 'var(--text-2)' }}>{n.note}</div>
        <div className="lr-sub">
          {fmtWhen(n.created_at)}
          {n.updated_at && n.updated_at !== n.created_at ? ' · edited' : ''}
        </div>
      </div>
      {mine && (
        <div className="lr-right">
          <button className="act-btn" data-tip="Edit note" onClick={() => setEditing(true)}>
            <Icon name="edit" />
          </button>
        </div>
      )}
    </div>
  )
}

function ActivityTab({ userId, inboxId, rows }) {
  const { toast } = useToast()
  const [form, setForm] = useState({ type: ACTIVITY_TYPES[0], description: '' })
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }))

  const create = useProfileWrite({
    userId,
    mutationFn: () => candidatesApi.createActivity({
      inboxId, type: form.type, status: 'Logged', description: form.description.trim(),
    }),
    success: 'Activity logged',
    onDone: () => setForm({ type: ACTIVITY_TYPES[0], description: '' }),
  })

  function submit() {
    if (!form.description.trim()) {
      toast('Describe what happened', 'warning')
      return
    }
    create.mutate()
  }

  return (
    <>
      {rows.length ? (
        <div className="list-tight">
          {rows.map((a) => {
            const clock = fmtClock(a.activity_time)
            return (
              <div className="list-row" key={a.id}>
                <span className="kpi-icn i-purple" style={{ width: 34, height: 34, borderRadius: 9 }}>
                  <Icon name="zap" />
                </span>
                <div className="lr-main">
                  <div className="lr-title">{a.activity_type || 'Activity'}</div>
                  {a.description && (
                    <div className="lr-sub" style={{ color: 'var(--text-2)', fontSize: 13 }}>{a.description}</div>
                  )}
                  <div className="lr-sub">{fmtWhen(a.activity_date)}{clock ? ` · ${clock}` : ''}</div>
                </div>
                <div className="lr-right">{a.activity_status ? <Badge>{a.activity_status}</Badge> : null}</div>
              </div>
            )
          })}
        </div>
      ) : (
        <EmptyState icon="zap" title="No activity recorded">Log the first touchpoint below.</EmptyState>
      )}

      <div className="divider" />
      <div className="form-section-title" style={{ marginTop: 0 }}>Log activity</div>
      <div className="form-grid">
        <div className="form-field">
          <label>Type</label>
          <select value={form.type} onChange={(e) => set('type', e.target.value)}>
            {ACTIVITY_TYPES.map((t) => <option key={t}>{t}</option>)}
          </select>
        </div>
        <div className="form-field">
          <label>What happened</label>
          <input
            value={form.description}
            onChange={(e) => set('description', e.target.value)}
            placeholder="Called to confirm availability"
          />
        </div>
      </div>
      <button
        className="btn btn-secondary btn-sm"
        style={{ marginTop: 10 }}
        disabled={!inboxId || create.isPending}
        onClick={submit}
      >
        <Icon name="plus" /> {create.isPending ? 'Logging…' : 'Log Activity'}
      </button>
      {!inboxId && (
        <p className="text-muted" style={{ marginTop: 8, fontSize: 12.5 }}>
          The activity log attaches to an email application — this candidate was added
          manually, so logging is unavailable here.
        </p>
      )}
    </>
  )
}

function DocumentsTab({ rows, inboxId }) {
  const { toast } = useToast()
  const download = useMutation({
    mutationFn: ({ index, filename }) => candidatesApi.downloadDocument({
      inboxId,
      index,
      filename,
    }),
    onError: (err) => toast(friendlyAuthError(err, 'Download failed.'), 'error'),
  })

  if (!rows.length) {
    return <EmptyState icon="file" title="No documents">This application arrived without attachments.</EmptyState>
  }
  return (
    <div className="list-tight">
      {rows.map((d, i) => (
        <div className="list-row" key={`${d.name}-${i}`}>
          <span className="kpi-icn i-red" style={{ width: 38, height: 38, borderRadius: 10 }}>
            <Icon name="file" />
          </span>
          <div className="lr-main">
            <div className="lr-title">{d.name}</div>
            <div className="lr-sub">Stored with the application</div>
          </div>
          <button
            className="act-btn"
            disabled={!inboxId || download.isPending}
            title={!inboxId ? 'No application id for download' : 'Download'}
            onClick={() => download.mutate({ index: i, filename: d.name })}
          >
            <Icon name="download" />
          </button>
        </div>
      ))}
    </div>
  )
}

/**
 * One scorecard, revisable in place via PATCH /feedback/update.
 *
 * Same authorship rule as NoteRow: the route neither checks nor reassigns
 * `reviewed_by`, so only the original reviewer is offered the control. A
 * revision keeps their name on it, which is the point.
 */
function FeedbackRow({ row: f, userId }) {
  const { user } = useAuth()
  const { toast } = useToast()
  const [editing, setEditing] = useState(false)
  const [form, setForm] = useState({
    review: f.review || REVIEWS[0],
    score: f.score == null ? '' : String(f.score),
    note: f.note || '',
  })
  const set = (k, v) => setForm((s) => ({ ...s, [k]: v }))

  const mine = Boolean(user?.id && f.reviewed_by && String(user.id) === String(f.reviewed_by))

  const save = useProfileWrite({
    userId,
    mutationFn: () => candidatesApi.updateFeedback(f.id, {
      review: form.review,
      score: form.score === '' ? 0 : Number(form.score),
      note: form.note.trim(),
    }),
    success: 'Scorecard updated',
    onDone: () => setEditing(false),
  })

  function submit() {
    const score = form.score === '' ? 0 : Number(form.score)
    if (!Number.isFinite(score) || score < 0 || score > 100) {
      toast('Score must be between 0 and 100', 'warning')
      return
    }
    save.mutate()
  }

  if (editing) {
    return (
      <div className="list-row" style={{ alignItems: 'flex-start' }}>
        <Avatar name={f.reviewed_by_name || 'Unknown'} />
        <div className="lr-main">
          <div className="form-grid">
            <div className="form-field">
              <label>Recommendation</label>
              <select value={form.review} onChange={(e) => set('review', e.target.value)}>
                {REVIEWS.map((r) => <option key={r}>{r}</option>)}
              </select>
            </div>
            <div className="form-field">
              <label>Score (0–100)</label>
              <input
                type="number" min="0" max="100"
                value={form.score}
                onChange={(e) => set('score', e.target.value)}
              />
            </div>
          </div>
          <div className="form-field">
            <label>Notes</label>
            <textarea value={form.note} onChange={(e) => set('note', e.target.value)} rows={3} />
          </div>
          <div className="flex items-center gap-8">
            <button className="btn btn-primary btn-sm" disabled={save.isPending} onClick={submit}>
              {save.isPending ? 'Saving…' : 'Save'}
            </button>
            <button
              className="btn btn-secondary btn-sm"
              disabled={save.isPending}
              onClick={() => {
                setForm({
                  review: f.review || REVIEWS[0],
                  score: f.score == null ? '' : String(f.score),
                  note: f.note || '',
                })
                setEditing(false)
              }}
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="list-row">
      <Avatar name={f.reviewed_by_name || 'Unknown'} />
      <div className="lr-main">
        <div className="lr-title">{f.reviewed_by_name || 'Unknown reviewer'}</div>
        {f.note && <div className="lr-sub" style={{ color: 'var(--text-2)' }}>{f.note}</div>}
        <div className="lr-sub">
          {fmtWhen(f.created_at)}{f.score ? ` · ${f.score}/100` : ''}
          {f.updated_at && f.updated_at !== f.created_at ? ' · revised' : ''}
        </div>
      </div>
      <div className="lr-right" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {f.review ? <Badge>{f.review}</Badge> : null}
        {mine && (
          <button className="act-btn" data-tip="Revise scorecard" onClick={() => setEditing(true)}>
            <Icon name="edit" />
          </button>
        )}
      </div>
    </div>
  )
}

function FeedbackTab({ userId, inboxId, rows }) {
  const { toast } = useToast()
  const [form, setForm] = useState({ review: REVIEWS[0], score: '', note: '' })
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }))

  const create = useProfileWrite({
    userId,
    mutationFn: () => candidatesApi.createFeedback({
      inboxId,
      review: form.review,
      score: form.score === '' ? 0 : Number(form.score),
      note: form.note.trim(),
    }),
    success: 'Scorecard submitted',
    onDone: () => setForm({ review: REVIEWS[0], score: '', note: '' }),
  })

  function submit() {
    const score = form.score === '' ? 0 : Number(form.score)
    if (!Number.isFinite(score) || score < 0 || score > 100) {
      toast('Score must be between 0 and 100', 'warning')
      return
    }
    create.mutate()
  }

  return (
    <>
      {rows.length ? (
        <div className="list-tight">
          {rows.map((f) => <FeedbackRow key={f.id} row={f} userId={userId} />)}
        </div>
      ) : (
        <EmptyState icon="award" title="No scorecards yet">Be the first to review this candidate.</EmptyState>
      )}

      <div className="divider" />
      <div className="form-section-title" style={{ marginTop: 0 }}>Submit a scorecard</div>
      <div className="form-grid">
        <div className="form-field">
          <label>Recommendation</label>
          <select value={form.review} onChange={(e) => set('review', e.target.value)}>
            {REVIEWS.map((r) => <option key={r}>{r}</option>)}
          </select>
        </div>
        <div className="form-field">
          <label>Score (0–100)</label>
          <input
            type="number"
            min="0"
            max="100"
            value={form.score}
            onChange={(e) => set('score', e.target.value)}
            placeholder="80"
          />
        </div>
      </div>
      <div className="form-field">
        <label>Notes</label>
        <textarea
          value={form.note}
          onChange={(e) => set('note', e.target.value)}
          placeholder="What stood out, and what would you probe next round?"
        />
      </div>
      <button
        className="btn btn-primary btn-sm"
        style={{ marginTop: 10 }}
        disabled={!inboxId || create.isPending}
        onClick={submit}
      >
        <Icon name="plus" /> {create.isPending ? 'Submitting…' : 'Submit Scorecard'}
      </button>
      {!inboxId && (
        <p className="text-muted" style={{ marginTop: 8, fontSize: 12.5 }}>
          Scorecards attach to an email application — this candidate was added manually,
          so submitting is unavailable here.
        </p>
      )}
    </>
  )
}