/**
 * HR V3 — 사람중심 카드 (여유 있는 정보 밀도, 아바타 강조)
 * 인라인 KPI 바 → 주의 직원 카드 그리드 → 조직도 + 신규입사 + 액션카드 → 근속 분포
 */
const HrDashboardV3 = () => {
  const [branch, setBranch] = React.useState('all');
  const D = HR_DATA;
  const fmtMoney = n => '₩' + Math.round(n/10000).toLocaleString() + '만';

  // 주의 필요 직원 (결근/지각/연차)
  const attention = EMPLOYEES.filter(e => e.today !== '출근')
    .map(e => ({ ...e, branchLabel: BRANCHES.find(b=>b.key===e.branch)?.label }));

  // 신규 입사자 (joinDate 2025-04 이후)
  const newJoiners = EMPLOYEES.filter(e => e.joinDate >= '2025-04-01');

  // 액션 카드 (처리 대기 7건 요약)
  const actionCards = [
    { type:'scheduleEdit',   count:D.alerts.scheduleEdit.length,   label:'근무 수정',  desc:'연차·교대 신청' },
    { type:'supplyRequest',  count:D.alerts.supplyRequest.length,  label:'비품 구매',  desc:'결재 대기' },
    { type:'payrollMissing', count:D.alerts.payrollMissing.length, label:'급여 정산', desc:'누락·정정' },
  ];

  return <HrShell
    headline="사람과 일정"
    subtitle={`${D.asOf} · 함께 일하는 ${D.total}명의 오늘`}
    branch={branch} setBranch={setBranch}>
    <div style={{ padding:'18px 28px 28px', display:'flex', flexDirection:'column', gap:18 }}>

      {/* 인라인 KPI 바 — 여유 있는 한 줄 */}
      <div style={{ background:'#fff', border:`1px solid ${C.border}`, borderRadius:14, padding:'18px 24px', display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:0 }}>
        {[
          { l:'전체',         v:D.total,                   u:'명', c:C.primary },
          { l:'오늘 출근율',  v:D.todayRate,               u:'%',  c:C.info, trend:'+2%p' },
          { l:'신규 입사',    v:D.newJoinThisMonth,        u:'명', c:C.violet },
          { l:'퇴사',          v:D.leaveThisMonth,          u:'명', c:C.fg3 },
          { l:'미처리 승인',  v:D.pendingApprovals,        u:'건', c:C.warning, urgent:true },
          { l:'이달 인건비',  v:fmtMoney(D.payroll.thisMonth).replace('₩','').replace('만',''), u:'만원', c:C.teal, trend:'▲ 8.4%' },
        ].map((k,i,arr) => (
          <div key={i} style={{ paddingLeft: i?20:0, paddingRight: i<arr.length-1?20:0, borderRight: i<arr.length-1 ? '1px solid #f1f5f9' : 'none', display:'flex', flexDirection:'column', gap:4 }}>
            <div style={{ fontSize:11, color:C.fg4, fontWeight:600, letterSpacing:'0.3px' }}>{k.l}</div>
            <div style={{ display:'flex', alignItems:'baseline', gap:3 }}>
              <span style={{ fontSize:24, fontWeight:900, color:k.c, letterSpacing:'-0.5px', fontVariantNumeric:'tabular-nums' }}>{k.v}</span>
              <span style={{ fontSize:11, color:C.fg3, fontWeight:700 }}>{k.u}</span>
              {k.urgent && <span style={{ width:6, height:6, borderRadius:'50%', background:C.warning, marginLeft:3 }}/>}
            </div>
            {k.trend && <div style={{ fontSize:10, color:k.c==C.fg3?C.fg3:C.primary, fontWeight:700 }}>{k.trend}</div>}
          </div>
        ))}
      </div>

      {/* 주의 필요 직원 카드 그리드 */}
      <div>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:10 }}>
          <div style={{ display:'flex', alignItems:'baseline', gap:8 }}>
            <span style={{ fontSize:14, fontWeight:800, color:C.fg1 }}>오늘 살펴봐야 할 사람</span>
            <span style={{ fontSize:11, color:C.fg4 }}>{attention.length}명 · 결근 {D.todayAbsent} · 지각 {D.todayLate} · 연차 {D.todayLeave}</span>
          </div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(220px, 1fr))', gap:12 }}>
          {attention.map(emp => {
            const stat = emp.today;
            const cfg = stat==='결근'
              ? { bg:'#fef2f2', border:'#fecaca', tag:'#dc2626', label:'결근' }
              : stat==='지각'
              ? { bg:'#fffbeb', border:'#fde68a', tag:'#f59e0b', label:`지각 · ${emp.arrival}` }
              : { bg:'#f8fafc', border:'#e2e8f0', tag:'#64748b', label:'연차/휴가' };
            return (
              <div key={emp.id} style={{ background:cfg.bg, border:`1px solid ${cfg.border}`, borderRadius:10, padding:14, display:'flex', flexDirection:'column', gap:10, cursor:'pointer', transition:'transform .15s' }}
                onMouseEnter={e=>e.currentTarget.style.transform='translateY(-2px)'}
                onMouseLeave={e=>e.currentTarget.style.transform='none'}>
                <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                  <Avatar name={emp.name} dept={emp.dept} size={42} ring/>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:14, fontWeight:800, color:C.fg1 }}>{emp.name}</div>
                    <div style={{ fontSize:11, color:C.fg3, marginTop:1 }}>{emp.role} · {emp.branchLabel}</div>
                  </div>
                </div>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                  <span style={{ padding:'3px 10px', fontSize:11, fontWeight:800, color:'#fff', background:cfg.tag, borderRadius:12 }}>{cfg.label}</span>
                  <DeptBadge dept={emp.dept} size="sm"/>
                </div>
                <div style={{ display:'flex', gap:6, paddingTop:8, borderTop:`1px solid ${cfg.border}` }}>
                  <button style={{ flex:1, padding:'6px 0', fontSize:11, fontWeight:700, color:C.fg2, background:'#fff', border:`1px solid ${cfg.border}`, borderRadius:6, cursor:'pointer' }}>📞 연락</button>
                  <button style={{ flex:1, padding:'6px 0', fontSize:11, fontWeight:700, color:'#fff', background:cfg.tag, border:'none', borderRadius:6, cursor:'pointer' }}>대처</button>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* 조직도 + 신규입사 + 액션카드 + 근속 */}
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr 1fr', gap:14 }}>
        {/* 조직도 */}
        <div style={{ background:'#fff', border:`1px solid ${C.border}`, borderRadius:12, padding:'16px 18px' }}>
          <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:12 }}>
            <span style={{ fontSize:13, fontWeight:800, color:C.fg1 }}>조직도</span>
            <span style={{ fontSize:10, color:C.fg4 }}>대표 → 운영팀장 → 지점</span>
          </div>
          <OrgMini/>
        </div>

        {/* 신규 입사 환영 */}
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          <div style={{ background:'linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%)', border:'1px solid #bbf7d0', borderRadius:12, padding:'16px 18px' }}>
            <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:10 }}>
              <span style={{ fontSize:13, fontWeight:800, color:'#166534' }}>이달 신규 입사</span>
              <span style={{ fontSize:11, fontWeight:800, color:'#16a34a', background:'#fff', padding:'2px 8px', borderRadius:10, border:'1px solid #bbf7d0' }}>{newJoiners.length}명</span>
            </div>
            {newJoiners.length === 0 ? (
              <div style={{ fontSize:11, color:C.fg4, padding:'10px 0' }}>이달 신규 입사자가 없습니다</div>
            ) : (
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                {newJoiners.map(emp => (
                  <div key={emp.id} style={{ background:'#fff', border:'1px solid #dcfce7', borderRadius:8, padding:'10px 12px', display:'flex', alignItems:'center', gap:10 }}>
                    <Avatar name={emp.name} dept={emp.dept} size={34}/>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontSize:12, fontWeight:700, color:C.fg1 }}>{emp.name}</div>
                      <div style={{ fontSize:10, color:C.fg3, marginTop:1 }}>{emp.role} · {BRANCHES.find(b=>b.key===emp.branch)?.label}</div>
                    </div>
                    <span style={{ fontSize:10, fontWeight:700, color:'#16a34a', background:'#f0fdf4', padding:'2px 7px', borderRadius:8, border:'1px solid #bbf7d0' }}>{emp.status}</span>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* 근속 분포 */}
          <div style={{ background:'#fff', border:`1px solid ${C.border}`, borderRadius:12, padding:'14px 18px' }}>
            <div style={{ fontSize:12, fontWeight:700, color:C.fg3, marginBottom:10 }}>근속 분포</div>
            <div style={{ display:'flex', height:12, borderRadius:6, overflow:'hidden', marginBottom:8 }}>
              {D.tenure.map((t,i) => (
                <div key={i} title={`${t.range} ${t.count}명`} style={{ flex:t.count, background:t.color }}/>
              ))}
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:4 }}>
              {D.tenure.map((t,i) => (
                <div key={i} style={{ display:'flex', alignItems:'center', gap:6, fontSize:11 }}>
                  <span style={{ width:8, height:8, borderRadius:2, background:t.color }}/>
                  <span style={{ flex:1, color:C.fg2 }}>{t.range}</span>
                  <span style={{ color:C.fg1, fontWeight:700, fontVariantNumeric:'tabular-nums' }}>{t.count}명</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 처리 대기 액션 카드 */}
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between' }}>
            <span style={{ fontSize:13, fontWeight:800, color:C.fg1 }}>처리 대기</span>
            <span style={{ fontSize:11, color:C.fg4 }}>총 {D.pendingApprovals}건</span>
          </div>
          {actionCards.map(c => {
            const meta = ALERT_META[c.type];
            return (
              <div key={c.type} style={{ background:'#fff', border:`1px solid ${C.border}`, borderLeft:`4px solid ${meta.color}`, borderRadius:8, padding:'12px 14px', display:'flex', alignItems:'center', gap:12, cursor:'pointer' }}>
                <div style={{ width:40, height:40, borderRadius:8, background:`${meta.color}1a`, color:meta.color, display:'flex', alignItems:'center', justifyContent:'center', fontSize:18, fontWeight:800 }}>{meta.icon}</div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:12, fontWeight:800, color:C.fg1 }}>{c.label}</div>
                  <div style={{ fontSize:11, color:C.fg3, marginTop:1 }}>{c.desc}</div>
                </div>
                <div style={{ display:'flex', alignItems:'baseline', gap:2 }}>
                  <span style={{ fontSize:22, fontWeight:900, color:meta.color, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.5px' }}>{c.count}</span>
                  <span style={{ fontSize:11, color:C.fg3, fontWeight:600 }}>건</span>
                </div>
              </div>
            );
          })}
          {/* 공지 작성 빠른 버튼 */}
          <button style={{ marginTop:4, padding:'12px 14px', fontSize:12, fontWeight:700, color:C.fg2, background:'#fff', border:`1px dashed ${C.border}`, borderRadius:8, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:6 }}>
            📢 새 공지 작성
          </button>
        </div>
      </div>

    </div>
  </HrShell>;
};

window.HrDashboardV3 = HrDashboardV3;