/* The 8-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.

   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 } from '../ui/primitives'
import { useToast } from '../ui/Toast'
import { seedQuery } from '../data/seedQueries'
import { qk } from '../lib/queryKeys'
import { friendlyAuthError } from '../lib/errors'
import * as candidatesApi from '../api/candidates'
import { companies, fmtDate, moneyK, pick } from '../data/seed'

const TABS = ['Overview', 'Resume', 'Timeline', 'Interview', 'Notes', 'Activity', 'Documents', 'Feedback']
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) })
      toast(typeof success === 'function' ? success(vars) : success, 'success')
      onDone?.()
    },
    onError: (err) => toast(friendlyAuthError(err, 'Could not save. Please try again.'), 'error'),
  })
}

export default function CandidateProfile({ candidate: c, onClose, onAdvance, onToggleFav, onAtsMatch }) {
  const { toast } = useToast()
  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

  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'),
  })

  // 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

  const counts = live && {
    Interview: live.interviews?.length ?? 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

  return (
    <Modal
      title="Candidate Profile"
      subtitle={c.id}
      size="modal-lg"
      onClose={onClose}
      footer={
        <>
          <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>
          )}
          <button className="btn btn-secondary" onClick={() => onAtsMatch(c)}>
            <Icon name="target" /> ATS Match
          </button>
          <button className="btn btn-secondary" onClick={() => toast('Email drafted', 'info')}>
            <Icon name="mail" /> Message
          </button>
          <button className="btn btn-primary" onClick={() => { onAdvance(c); onClose() }}>
            <Icon name="check" /> Advance Stage
          </button>
        </>
      }
    >
      <div className="profile-hero">
        <Avatar 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">
            <Badge>{c.stage}</Badge> <Badge className="b-gray">{live?.source || c.source}</Badge>
            <span className="badge b-plain b-indigo badge-plain">{c.experience} yrs exp</span>
          </div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <ScoreChip score={live?.ai_score ?? c.aiScore} />
          <div className="cell-sub" style={{ marginTop: 4 }}>AI Match</div>
        </div>
      </div>

      <div style={{ marginTop: 22 }}>
        <Tabs
          value={tab}
          onChange={setTab}
          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)} />
              <Info label="Rating" val={`⭐ ${(live.rating ?? 0).toFixed(1)} / 5.0`} />
              <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 === '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 === '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 ?? []} />
        ) : (
          <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>
    </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>
  )
}

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>
    </>
  )
}

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) => (
            <div className="list-row" key={n.id}>
              <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)}</div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <EmptyState icon="edit" title="No notes yet">The first note on this candidate goes above.</EmptyState>
      )}
    </>
  )
}

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>
    </>
  )
}

function DocumentsTab({ rows }) {
  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">{d.path || 'Stored with the application'}</div>
            </div>
          </div>
        ))}
      </div>
      {/* No download button: attachments live on the worker's filesystem and no
          route serves them yet, so a button here could only lie. */}
      <p className="text-muted text-sm" style={{ marginTop: 12 }}>
        <Icon name="info" /> Attachments are stored server-side; download is not exposed yet.
      </p>
    </>
  )
}

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) => (
            <div className="list-row" key={f.id}>
              <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` : ''}</div>
              </div>
              <div className="lr-right">{f.review ? <Badge>{f.review}</Badge> : null}</div>
            </div>
          ))}
        </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>
    </>
  )
}