// ---------- HR & Leave ----------

function HRLeave({ role, userObj }) {
  const [tab, setTab] = React.useState('leave');
  const [showReq, setShowReq] = React.useState(false);
  const [showWarn, setShowWarn] = React.useState(false);
  const isBoss = role === 'boss';
  const visibleLeaves = isBoss ? LEAVES : LEAVES.filter(l => l.employee === userObj.full_name);
  const visibleWarns = isBoss ? WARNINGS : WARNINGS.filter(w => w.employee === userObj.full_name);

  return (
    <div style={{display:'flex',flexDirection:'column',gap:20}}>
      <div style={{display:'flex',gap:4,borderBottom:'1px solid var(--border)'}}>
        {[['leave','Leave requests ('+visibleLeaves.length+')'],['warnings','Warnings ('+visibleWarns.length+')']].map(([v,l]) => (
          <button key={v} onClick={()=>setTab(v)} style={{padding:'12px 16px',fontSize:13,borderBottom:'2px solid '+(tab===v?'var(--accent)':'transparent'),color: tab===v?'var(--accent)':'var(--text-dim)',fontWeight:500}}>{l}</button>
        ))}
      </div>

      {tab === 'leave' && (
        <>
          <div style={{display:'flex',justifyContent:'flex-end',gap:10}}>
            {!isBoss && <button className="btn btn-primary btn-sm" onClick={()=>setShowReq(true)}><Icon.Plus size={13}/> Request leave</button>}
          </div>
          <TablePanel>
            <table style={{width:'100%',borderCollapse:'collapse'}}>
              <thead><tr>
                <Th>Employee</Th><Th>Dates</Th><Th>Reason</Th><Th>Status</Th>{isBoss && <Th align="end">Actions</Th>}
              </tr></thead>
              <tbody>
                {visibleLeaves.map(l => (
                  <tr key={l.id}>
                    <Td><span style={{fontWeight:500}}>{l.employee}</span></Td>
                    <Td><span className="mono" style={{fontSize:12}}>{fmtDate(l.start_date)} → {fmtDate(l.end_date)}</span></Td>
                    <Td><span style={{color:'var(--text-dim)'}}>{l.reason}</span></Td>
                    <Td><StatusBadge status={l.status}/></Td>
                    {isBoss && (
                      <Td align="end">
                        {l.status === 'pending' ? (
                          <div style={{display:'flex',gap:6,justifyContent:'flex-end'}}>
                            <button className="btn btn-sm" style={{background:'var(--green-dim)',color:'var(--green)'}}><Icon.Check size={12}/> Approve</button>
                            <button className="btn btn-sm" style={{background:'var(--red-dim)',color:'var(--red)'}}><Icon.X size={12}/> Deny</button>
                          </div>
                        ) : <span style={{fontSize:11,color:'var(--text-dim)'}}>—</span>}
                      </Td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </TablePanel>
        </>
      )}

      {tab === 'warnings' && (
        <>
          <div style={{display:'flex',justifyContent:'flex-end',gap:10}}>
            {isBoss && <button className="btn btn-primary btn-sm" onClick={()=>setShowWarn(true)}><Icon.Plus size={13}/> Issue warning</button>}
          </div>
          <TablePanel>
            <table style={{width:'100%',borderCollapse:'collapse'}}>
              <thead><tr>
                <Th>Employee</Th><Th>Reason</Th><Th>Severity</Th><Th>Issued date</Th><Th>Issued by</Th>
              </tr></thead>
              <tbody>
                {visibleWarns.map(w => (
                  <tr key={w.id}>
                    <Td><span style={{fontWeight:500}}>{w.employee}</span></Td>
                    <Td><span style={{color:'var(--text-dim)'}}>{w.reason}</span></Td>
                    <Td><StatusBadge status={w.severity}/></Td>
                    <Td><span className="mono" style={{fontSize:12,color:'var(--text-dim)'}}>{fmtDate(w.issued_date)}</span></Td>
                    <Td><span style={{color:'var(--text-dim)'}}>{w.issued_by}</span></Td>
                  </tr>
                ))}
              </tbody>
            </table>
          </TablePanel>
        </>
      )}

      {showReq && (
        <div className="modal-backdrop" onClick={()=>setShowReq(false)}>
          <div className="modal" onClick={e=>e.stopPropagation()}>
            <h3 style={{fontSize:24,marginBottom:20}}>Request leave</h3>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
              <div className="field"><label>Start date</label><input type="date" defaultValue="2026-04-25"/></div>
              <div className="field"><label>End date</label><input type="date" defaultValue="2026-04-28"/></div>
              <div className="field" style={{gridColumn:'1 / -1'}}><label>Reason</label><textarea rows="3" placeholder="Family, medical, personal..."/></div>
            </div>
            <div style={{display:'flex',gap:10,justifyContent:'flex-end',marginTop:24}}>
              <button className="btn btn-ghost btn-sm" onClick={()=>setShowReq(false)}>Cancel</button>
              <button className="btn btn-primary btn-sm" onClick={()=>setShowReq(false)}>Submit</button>
            </div>
          </div>
        </div>
      )}

      {showWarn && (
        <div className="modal-backdrop" onClick={()=>setShowWarn(false)}>
          <div className="modal" onClick={e=>e.stopPropagation()}>
            <h3 style={{fontSize:24,marginBottom:20}}>Issue warning</h3>
            <div style={{display:'flex',flexDirection:'column',gap:14}}>
              <div className="field"><label>Employee</label><select>{EMPLOYEES.filter(e=>e.status==='active').map(e=><option key={e.id}>{e.full_name}</option>)}</select></div>
              <div className="field"><label>Severity</label><select><option>minor</option><option>major</option><option>final</option></select></div>
              <div className="field"><label>Reason</label><textarea rows="3" placeholder="Describe the issue..."/></div>
            </div>
            <div style={{display:'flex',gap:10,justifyContent:'flex-end',marginTop:24}}>
              <button className="btn btn-ghost btn-sm" onClick={()=>setShowWarn(false)}>Cancel</button>
              <button className="btn btn-primary btn-sm" onClick={()=>setShowWarn(false)}>Issue</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { HRLeave });