// Right panel — candidate detail (resume + AI analysis)
const { color: DC, font: DF } = window.FF;

function CandidateDetail({ candidate, vocab }) {
  const v = window.FFLIB.vocab(vocab);
  if (!candidate) {
    return (
      <section style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', color: DC.shade[700] }}>
        Select a candidate to see their resume.
      </section>
    );
  }
  const sourceColor = candidate.source === 'applied' ? DC.inform : DC.copilot;
  const sourceLabel = candidate.source === 'applied' ? v.applied : v.sourced;
  const stageDropdownLabel = ({
    sourcing:'Sourcing', new:'New', engaged:'Engaged', review:'Review', interview:'Interview'
  })[candidate.stage] || 'Stage';

  return (
    <section data-screen-label="Candidate detail" style={{ flex:1, display:'flex', flexDirection:'column', minWidth:0, background:'#fff' }}>
      {/* Top bar — candidate name, contact, actions */}
      <div style={{ padding:'14px 28px 0' }}>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <h2 style={{ margin:0, fontSize:20, fontWeight:800, color: DC.shade[880], letterSpacing:'-.01em' }}>{candidate.name}</h2>
          <span style={{
            display:'inline-flex', alignItems:'center', gap:4,
            padding:'3px 8px 3px 6px', background: DC.primary[500], color:'#fff',
            fontSize:12, fontWeight:700, borderRadius:5,
          }}>★ {candidate.score}</span>
          <span style={{ fontSize:13, color: DC.shade[820] }}>
            for <span style={{ fontWeight:600, color: DC.shade[880] }}>{'Machine Operator I — O’Neal …'}</span>
          </span>
          <img src="assets/icons/lightning-20.svg" width={15} height={15} style={{ opacity:.7 }}/>

          {/* Source pill — visible regardless of layout */}
          <span style={{
            display:'inline-flex', alignItems:'center', gap:5,
            padding:'3px 9px', borderRadius:9999,
            fontSize:11, fontWeight:700,
            background: sourceColor[50], color: sourceColor[700],
            border:`1px solid ${sourceColor[50]}`,
          }}>
            <img src={`assets/icons/${candidate.source==='applied'?'users-plus':'lightning-20'}.svg`} width={11} height={11}/>
            {sourceLabel}
          </span>

          <div style={{ flex:1 }}/>

          {/* Stage dropdown (the confusing "Sourcing" one in top right) */}
          <button style={{
            display:'inline-flex', alignItems:'center', gap:6,
            padding:'7px 12px', border:`1px solid ${DC.tint[100]}`, borderRadius:8,
            background:'#fff', cursor:'pointer', fontSize:13, color: DC.shade[820], fontWeight:500,
          }}>
            <span style={{ fontSize:10, color: DC.shade[700], fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em' }}>Stage</span>
            <span style={{ color: DC.shade[880], fontWeight:600 }}>{stageDropdownLabel}</span>
            <img src="assets/icons/chevron-down.svg" width={12} height={12}/>
          </button>
          <button style={{
            display:'inline-flex', alignItems:'center', gap:6,
            padding:'7px 12px', background: DC.shade[880], color:'#fff',
            border:0, borderRadius:8, cursor:'pointer', fontSize:13, fontWeight:600,
          }}>
            <span>📅</span> Schedule interview
          </button>
          <button style={{ background:'transparent', border:0, padding:6, cursor:'pointer' }}>
            <img src="assets/icons/file-20.svg" width={18} height={18}/>
          </button>
        </div>

        {/* Contact row */}
        <div style={{ display:'flex', alignItems:'center', gap:14, fontSize:13, color: DC.shade[820], marginTop:6 }}>
          <span>Located in {candidate.loc}</span>
          <span style={{ display:'inline-flex', alignItems:'center', gap:4 }}>📞 336-276-4475</span>
          <span style={{ display:'inline-flex', alignItems:'center', gap:4 }}>✉ {candidate.name.toLowerCase().split(' ')[0]}{Math.floor(Math.random()*9000)+1000}@yahoo.com</span>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ padding:'14px 28px 0', borderBottom:`1px solid ${DC.tint[80]}`, display:'flex', gap:22 }}>
        {['Resume','Conversation','Applications','Notes'].map((t,i) => (
          <button key={t} style={{
            padding:'10px 0 12px', background:'transparent', border:0,
            borderBottom: i===0 ? `2px solid ${DC.shade[880]}` : '2px solid transparent',
            color: i===0 ? DC.shade[880] : DC.shade[700], fontWeight: i===0?700:500,
            fontSize:14, cursor:'pointer',
          }}>{t}</button>
        ))}
      </div>

      {/* Scrollable body */}
      <div style={{ flex:1, overflow:'auto', padding:'0 28px' }}>
        {/* AI analysis card */}
        <div style={{ margin:'18px 0 0', padding:'14px 16px', background: DC.primary[50], borderRadius:10, border:`1px solid ${DC.primary[300]}55` }}>
          <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:6 }}>
            <span style={{
              display:'inline-flex', alignItems:'center', gap:4,
              padding:'3px 8px 3px 6px', background: DC.primary[500], color:'#fff',
              fontSize:11, fontWeight:700, borderRadius:4,
            }}>★ {candidate.score}</span>
            <span style={{ fontSize:13, color: DC.shade[820] }}>
              for <span style={{ fontWeight:700, color: DC.shade[880] }}>{'Machine Operator I — O’Neal Manufacturing Services'}</span>
            </span>
          </div>
          <ul style={{ margin:'6px 0 0', paddingLeft:18, fontSize:13, color: DC.shade[880], lineHeight:1.5 }}>
            <li>{candidate.name.split(' ')[0]} has direct experience as a CNC Machinist at O’Neal Steel (1999–2003), which is a significant favorable indicator for performance in our environment.</li>
            <li>His extensive experience with precision measuring tools (calipers, micrometers), blueprint reading, and machine operation directly matches the core skills required for a Machine Operator I.</li>
            <li>He has confirmed experience operating forklifts and overhead cranes, which are essential abilities for this role.</li>
            <li>His stated pay expectations of $20–30/hr are above the role's range of $17–18.50/hr, which may be a point of negotiation or concern.</li>
          </ul>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:10, flexWrap:'wrap' }}>
            <Pill tone="critical" icon="✕">Longevity</Pill>
            <Pill tone="critical" icon="✕">Pay expectations</Pill>
            <Pill tone="success" icon="✓">Shift expectations</Pill>
            <Pill tone="success" icon="✓">Ability to commute</Pill>
            <div style={{ flex:1 }}/>
            <span style={{ fontSize:12, color: DC.shade[700] }}>How did I do? 👍 👎</span>
          </div>
        </div>

        {/* Download button */}
        <div style={{ display:'flex', justifyContent:'flex-end', marginTop:14 }}>
          <button style={{
            display:'inline-flex', alignItems:'center', gap:6,
            padding:'8px 14px', background: DC.shade[880], color:'#fff',
            border:0, borderRadius:6, cursor:'pointer', fontSize:13, fontWeight:600,
          }}>
            ⬇ Download resume
          </button>
        </div>

        {/* Resume body */}
        <div style={{ marginTop:8, padding:'24px 30px 60px', fontFamily:'Times, "Times New Roman", serif', color: DC.shade[880], fontSize:13.5, lineHeight:1.55, minHeight:'80vh' }}>
          <h3 style={{ textAlign:'center', fontStyle:'italic', fontSize:18, margin:'0 0 18px' }}>{candidate.name} Desert Storm Veteran</h3>
          <div style={{ marginBottom:18 }}>
            <div>{candidate.name}</div>
            <div>4442 Tekoa Lane</div>
            <div>Winston-Salem, North Carolina 27105, US</div>
            <div>Home Phone: 336-276-4475</div>
            <div>Secondary Phone: 336-276-4475</div>
            <div>E-mail: {candidate.name.toLowerCase().split(' ')[0]}6701@yahoo.com</div>
          </div>
          <div style={{ fontWeight:700, fontStyle:'italic', marginBottom:6 }}>OBJECTIVE</div>
          <div style={{ marginBottom:18 }}>I enjoy working in the manufacturing field as a CNC Machinist. It's very challenging for me and I am continuing my education to someday be a Manufacturing Engineer.</div>
          <div style={{ fontWeight:700, fontStyle:'italic', marginBottom:6 }}>WORK EXPERIENCE</div>
          <div style={{ fontWeight:700, fontStyle:'italic', marginBottom:4 }}>{candidate.role}</div>
          <div style={{ fontWeight:700, fontStyle:'italic', marginBottom:4 }}>July 2019 – Present</div>
          <div style={{ marginBottom:6 }}>{candidate.company} | Whitsett, NC</div>
          <p style={{ margin:'0 0 14px' }}>Perform first piece inspection, in process inspection, assembly inspection, and final inspection on parts being manufactured as an embedded Tech primarily using a FARO Arm. Tasked with performing receiving inspection for material being processed to manufacture. Perform Outside Processing inspection for parts sent out for processing such as NDT, plating and painting of all sorts, etc. Used inspection instruments i.e. calipers, micrometers, height gage, bore gage, CMM.</p>
          <div style={{ fontWeight:700, fontStyle:'italic', marginBottom:4 }}>Quality Assurance Inspector</div>
          <div style={{ fontWeight:700, fontStyle:'italic', marginBottom:6 }}>June 2018 – May 2019</div>
          <div style={{ marginBottom:6 }}>Summit Aviation, Inc. | Kernersville, NC</div>
          <p style={{ margin:0 }}>Perform first piece inspection, in process inspection, assembly inspection, and final inspection on parts being manufactured. Tasked with performing receiving inspection for material being processed to manufacture.</p>
        </div>
      </div>
    </section>
  );
}

function Pill({ tone, icon, children }) {
  const tones = {
    success:  { bg: DC.primary[50],  fg: DC.primary[600],  border: '#A7E3BE' },
    critical: { bg: DC.critical[50], fg: DC.critical[700], border: '#F3B5B5' },
  };
  const t = tones[tone];
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:5,
      padding:'4px 10px 4px 7px', borderRadius:9999,
      background: t.bg, color: t.fg, border:`1px solid ${t.border}`,
      fontSize:12, fontWeight:600,
    }}>
      <span style={{
        width:14, height:14, borderRadius:'50%', background: t.fg, color:'#fff',
        display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:9, fontWeight:800,
      }}>{icon}</span>
      {children}
    </span>
  );
}

Object.assign(window, { CandidateDetail });