// Dashboard page

const Dashboard = ({ data, today, view, setView, selected, setSelected, onAction, role, currentUser }) => {
  // Today's situation
  const todayEvents = window.getDayEvents(today, data);
  const todayHead = window.getHeadcount(today, data);

  // Pending counts
  const pendingLeaves = data.leaves.filter(l => l.status === 'pending').length;
  const pendingOt = data.otRequests.filter(o => o.status === 'pending').length;
  const pendingSwap = data.swapRequests.filter(s => s.status === 'pending').length;

  // This month's leave count
  const thisMonth = data.leaves.filter(l => {
    const d = new Date(l.from);
    return d.getMonth() === view.month && d.getFullYear() === view.year && l.status === 'approved';
  }).reduce((sum, l) => sum + l.days, 0);

  return (
    <div data-screen-label="Dashboard">
      <div className="stats-row">
        <div className="stat">
          <div className="stat-icon"><Icon name="users"/></div>
          <div className="stat-label"><Icon name="users" size={13}/>เข้างานวันนี้</div>
          <div className="stat-value">{todayHead.working}<span style={{fontSize:14,color:'var(--ink-400)',fontWeight:500}}> / {data.employees.length}</span></div>
          <div className="stat-meta"><strong>{todayHead.off}</strong> คนไม่อยู่ · {todayEvents.filter(e => e.type === 'ot').length} OT</div>
        </div>
        <div className="stat">
          <div className="stat-icon" style={{background:'var(--vac-bg)', color:'var(--vac)'}}><Icon name="plane"/></div>
          <div className="stat-label"><Icon name="clock" size={13}/>คำขอลาที่รออนุมัติ</div>
          <div className="stat-value">{pendingLeaves}</div>
          <div className="stat-meta">เก่าที่สุด <strong>2 วัน</strong> ที่แล้ว</div>
        </div>
        <div className="stat">
          <div className="stat-icon" style={{background:'var(--ot-bg)', color:'var(--ot)'}}><Icon name="sparkle"/></div>
          <div className="stat-label"><Icon name="sparkle" size={13}/>คำขอ OT รออนุมัติ</div>
          <div className="stat-value">{pendingOt}</div>
          <div className="stat-meta">รวม <strong>12 ชั่วโมง</strong></div>
        </div>
        <div className="stat">
          <div className="stat-icon" style={{background:'var(--swap-bg)', color:'var(--swap)'}}><Icon name="swap"/></div>
          <div className="stat-label"><Icon name="swap" size={13}/>คำขอสลับวันหยุด</div>
          <div className="stat-value">{pendingSwap}</div>
          <div className="stat-meta">ต้องตรวจ <strong>คนทำงานขั้นต่ำ</strong></div>
        </div>
      </div>

      <div className="two-col">
        <CalendarMonth
          view={view}
          setView={setView}
          selected={selected}
          setSelected={setSelected}
          data={data}
          today={today}
        />
        <DayPanel
          date={selected}
          data={data}
          onClose={() => setSelected(null)}
          onAction={onAction}
          role={role}
        />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 20 }}>
        <UpcomingPanel data={data} today={today} />
        <PendingApprovals data={data} role={role} onAction={onAction}/>
      </div>
    </div>
  );
};

const UpcomingPanel = ({ data, today }) => {
  const empMap = Object.fromEntries(data.employees.map(e => [e.id, e]));
  const upcoming = [];

  data.leaves.forEach(l => {
    const from = new Date(l.from);
    if (from >= today && l.status === 'approved') {
      upcoming.push({ when: from, type: l.type, empId: l.empId, label: `${TYPE_LABEL[l.type].th} ${l.days} วัน` });
    }
  });
  data.swapRequests.forEach(s => {
    if (s.status === 'approved') {
      const d = new Date(s.swapWorkDate);
      if (d >= today) upcoming.push({ when: d, type: 'swap-work', empId: s.empId, label: 'มาทำงานชดเชย' });
    }
  });
  data.otRequests.forEach(o => {
    if (o.status === 'approved') {
      const d = new Date(o.date);
      if (d >= today) upcoming.push({ when: d, type: 'ot', empId: o.empId, label: `OT ${o.hours} ชม.` });
    }
  });

  upcoming.sort((a, b) => a.when - b.when);
  const list = upcoming.slice(0, 6);

  return (
    <div className="card">
      <div className="card-header">
        <div>
          <div className="card-title">กำลังจะมาถึง</div>
          <div className="card-sub">การลา OT และวันสลับที่อนุมัติแล้ว</div>
        </div>
        <button className="btn btn-quiet btn-sm">ดูทั้งหมด <Icon name="arrowRight" size={12}/></button>
      </div>
      <div>
        {list.map((u, i) => {
          const emp = empMap[u.empId];
          if (!emp) return null;
          const meta = TYPE_LABEL[u.type];
          return (
            <div key={i} className="row" style={{ padding: '12px 18px', borderBottom: '1px solid var(--ink-100)', gap: 12 }}>
              <div className={`type-icon ${meta.cls}`}><Icon name={meta.icon} size={14}/></div>
              <div className="flex-1">
                <div style={{ fontSize: 13, fontWeight: 500 }}>{emp.name} <span className="muted" style={{ fontWeight: 400 }}>· {u.label}</span></div>
                <div className="emp-meta">{window.APP_HELPERS.fmtThaiDate(u.when, { full: true })}</div>
              </div>
              <span className="avatar" style={{ background: emp.color }}>{emp.avatar}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const PendingApprovals = ({ data, role, onAction }) => {
  const empMap = Object.fromEntries(data.employees.map(e => [e.id, e]));
  const items = [];
  data.leaves.filter(l => l.status === 'pending').forEach(l => items.push({ kind: 'leave', ref: l }));
  data.otRequests.filter(o => o.status === 'pending').forEach(o => items.push({ kind: 'ot', ref: o }));
  data.swapRequests.filter(s => s.status === 'pending').forEach(s => items.push({ kind: 'swap', ref: s }));

  return (
    <div className="card">
      <div className="card-header">
        <div>
          <div className="card-title">รออนุมัติ</div>
          <div className="card-sub">คำขอที่ต้องตรวจสอบ ({items.length})</div>
        </div>
        <button className="btn btn-quiet btn-sm">ดูทั้งหมด <Icon name="arrowRight" size={12}/></button>
      </div>
      <div>
        {items.map((it, i) => {
          const emp = empMap[it.ref.empId];
          if (!emp) return null;
          let typeKey, typeText, dateText;
          if (it.kind === 'leave') {
            typeKey = it.ref.type;
            typeText = TYPE_LABEL[typeKey].th;
            dateText = `${window.APP_HELPERS.fmtThaiDate(it.ref.from, {shortMonth:true})} – ${window.APP_HELPERS.fmtThaiDate(it.ref.to, {shortMonth:true})} · ${it.ref.days} วัน`;
          } else if (it.kind === 'ot') {
            typeKey = 'ot';
            typeText = `OT ${it.ref.hours} ชม.`;
            dateText = window.APP_HELPERS.fmtThaiDate(it.ref.date, { full: true });
          } else {
            typeKey = 'swap-work';
            typeText = 'สลับวันหยุด';
            dateText = `ทำงาน ${window.APP_HELPERS.fmtThaiDate(it.ref.swapWorkDate, {shortMonth:true})} ⇄ หยุด ${window.APP_HELPERS.fmtThaiDate(it.ref.swapOffDate, {shortMonth:true})}`;
          }
          const meta = TYPE_LABEL[typeKey];

          return (
            <div key={i} className="row" style={{ padding: '12px 18px', borderBottom: '1px solid var(--ink-100)', gap: 12 }}>
              <span className="avatar" style={{ background: emp.color }}>{emp.avatar}</span>
              <div className="flex-1">
                <div style={{ fontSize: 13, fontWeight: 500 }}>{emp.name} <span className={`chip chip-${meta.cls}`} style={{marginLeft:4}}><span className="chip-dot"/>{typeText}</span></div>
                <div className="emp-meta">{dateText} · {it.ref.reason}</div>
              </div>
              <div className="row" style={{ gap: 4 }}>
                <button className="icon-btn" style={{ width: 30, height: 30, color: 'var(--swap)' }} title="อนุมัติ"><Icon name="check" size={15}/></button>
                <button className="icon-btn" style={{ width: 30, height: 30, color: 'var(--sick)' }} title="ปฏิเสธ"><Icon name="x" size={15}/></button>
              </div>
            </div>
          );
        })}
        {items.length === 0 && <div className="empty">ไม่มีคำขอรออนุมัติ</div>}
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;