// Day Panel — shows detailed info for selected day

const { fmtThaiDate: fmtThai, fmtISO: toISO, isHoliday: isHol } = window.APP_HELPERS;

const TYPE_LABEL = {
  vacation: { th: 'ลาพักร้อน',  icon: 'vacationV',  cls: 'vac' },
  sick:     { th: 'ลาป่วย',     icon: 'pill',   cls: 'sick' },
  personal: { th: 'ลากิจ',       icon: 'coffee', cls: 'pers' },
  ot:       { th: 'ทำงาน OT',    icon: 'sparkle',cls: 'ot' },
  'swap-work':{ th: 'มาทำงานชดเชย',icon: 'swap',cls: 'swap' },
  'swap-off':{ th: 'หยุดแทน',    icon: 'swap',   cls: 'swap' },
  special:  { th: 'หยุดพิเศษ',   icon: 'star',   cls: 'special' },
};

const DayPanel = ({ date, data, onClose, onAction, role }) => {
  if (!date) {
    return (
      <div className="day-panel">
        <div className="empty" style={{ padding: '60px 20px' }}>
          <Icon name="calendar" size={28} style={{ color: 'var(--ink-300)', marginBottom: 10 }}/>
          <div style={{ fontWeight: 600, color: 'var(--ink-700)', marginBottom: 4 }}>เลือกวันในปฏิทิน</div>
          <div className="text-xs">คลิกวันที่เพื่อดูรายละเอียดการลา OT และการสลับวันหยุด</div>
        </div>
      </div>
    );
  }
  const iso = toISO(date);
  const empMap = Object.fromEntries(data.employees.map(e => [e.id, e]));
  const events = window.getDayEvents(date, data);
  const hol = isHol(date, data.holidays);
  const isWorkDay = data.settings.workDays.includes(date.getDay()) && !hol;
  const head = window.getHeadcount(date, data);

  const groups = {
    vacation: [], sick: [], personal: [], special: [],
    ot: [], 'swap-work': [], 'swap-off': []
  };
  events.forEach(e => { if (groups[e.type]) groups[e.type].push(e); });

  // Compute who is working today
  const offEmpIds = new Set();
  events.forEach(e => {
    if (['vacation','sick','personal','special','swap-off'].includes(e.type)) offEmpIds.add(e.empId);
  });
  const otEmpIds = new Set();
  events.forEach(e => {
    if (e.type === 'ot' || e.type === 'swap-work') otEmpIds.add(e.empId);
  });

  let working = [];
  if (isWorkDay) {
    working = data.employees.filter(e => !offEmpIds.has(e.id));
  } else {
    working = data.employees.filter(e => otEmpIds.has(e.id));
  }

  const dayLabel = ['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์'][date.getDay()];

  return (
    <div className="day-panel">
      <div className="day-panel-header">
        <div className="row between">
          <div>
            <div className="day-big">{date.getDate()} {window.APP_HELPERS.TH_MONTHS_SHORT[date.getMonth()]}</div>
            <div className="day-sub">วัน{dayLabel} · {date.getFullYear() + 543}</div>
            <div style={{ marginTop: 10, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {hol && <span className="day-tag chip-hol"><span className="chip-dot"/>นักขัตฤกษ์ · {hol.name}</span>}
              {!hol && date.getDay() === 0 && <span className="day-tag" style={{background:'var(--weekend-bg)',color:'var(--weekend)'}}><span className="chip-dot"/>วันหยุดประจำสัปดาห์</span>}
              {isWorkDay && <span className="day-tag chip-approved"><span className="chip-dot"/>วันทำงานปกติ</span>}
            </div>
          </div>
          <button className="icon-btn" onClick={onClose} title="ปิด">
            <Icon name="x" />
          </button>
        </div>
      </div>

      <div className="day-body">
        {!isWorkDay && (() => {
          const plan = (data.otPlans && data.otPlans[iso]) || { target: data.settings.otTargetDefault || 3, min: data.settings.otMinDefault || 2 };
          const confirmed = otEmpIds.size;
          const status = confirmed >= plan.target ? 'full' : (confirmed >= plan.min ? 'min' : 'low');
          const pct = Math.min(100, (confirmed / Math.max(1, plan.target)) * 100);
          const barColor = status === 'full' ? 'var(--swap)' : status === 'min' ? 'var(--ot)' : 'var(--sick)';
          return (
            <div style={{
              padding: 14,
              background: 'var(--ot-bg)',
              border: '1px solid color-mix(in oklab, var(--ot) 25%, transparent)',
              borderRadius: 10,
              marginBottom: 16,
            }}>
              <div className="row between mb-2">
                <div className="row" style={{ gap: 8 }}>
                  <div className="type-icon ot" style={{ width: 28, height: 28 }}><Icon name="sparkle" size={14}/></div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>แผน OT วันนี้</div>
                    <div className="text-xs muted">เป้า {plan.target} คน · ขั้นต่ำ {plan.min} คน</div>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'var(--font-en)', lineHeight: 1, color: barColor }}>
                    {confirmed}<span style={{ fontSize: 12, color: 'var(--ink-400)', fontWeight: 500 }}>/{plan.target}</span>
                  </div>
                  <div className="text-xs" style={{ color: barColor, fontWeight: 600 }}>
                    {status === 'full' ? 'ครบเป้าหมาย' : status === 'min' ? `ขาด ${plan.target - confirmed} คน` : `ต่ำกว่าขั้นต่ำ ${plan.min - confirmed} คน`}
                  </div>
                </div>
              </div>
              <div className="bar"><span style={{ width: `${pct}%`, background: barColor }}/></div>
              {role === 'admin' && (
                <div className="row" style={{ gap: 6, marginTop: 10 }}>
                  <button className="btn btn-ghost btn-sm flex-1" onClick={() => onAction && onAction('ot-plan', date)}>
                    <Icon name="edit" size={12}/> ปรับแผน
                  </button>
                  <button className="btn btn-ghost btn-sm flex-1" onClick={() => onAction && onAction('ot', date)}>
                    <Icon name="plus" size={12}/> เพิ่มคน OT
                  </button>
                </div>
              )}
            </div>
          );
        })()}
        <div className="day-section">
          <div className="day-section-title">
            <span>มาทำงาน <span className="count">{working.length}/{data.employees.length}</span></span>
            {isWorkDay && head.working < data.settings.minStaffPerDay && <span className="chip chip-rejected">ต่ำกว่าขั้นต่ำ</span>}
          </div>
          {working.length === 0 ? (
            <div className="text-xs muted" style={{ padding: '6px 0' }}>ไม่มีพนักงานเข้างานวันนี้</div>
          ) : (
            <div className="row" style={{ flexWrap: 'wrap', gap: 6 }}>
              {working.map(e => (
                <div key={e.id} className="row" style={{ gap: 0, padding: '5px 10px', background: 'var(--ink-50)', borderRadius: 999 }}>
                  <span className="text-xs" style={{ fontWeight: 500 }}>{e.name.split(' ')[0]}</span>
                </div>
              ))}
            </div>
          )}
        </div>

        {Object.entries(groups).map(([type, items]) => {
          if (items.length === 0) return null;
          const meta = TYPE_LABEL[type];
          return (
            <div key={type} className="day-section">
              <div className="day-section-title">
                <span>{meta.th} <span className="count">{items.length}</span></span>
              </div>
              {items.map((ev, i) => {
                const emp = empMap[ev.empId];
                if (!emp) return null;
                return (
                  <div key={i} className="day-row">
                    <div className={`type-icon ${meta.cls}`}><Icon name={meta.icon} size={14}/></div>
                    <div className="flex-1">
                      <div className="emp-name">{emp.name}</div>
                      <div className="emp-meta">{emp.role}{ev.ref?.reason ? ` · ${ev.ref.reason}` : ''}{ev.ref?.hours ? ` · ${ev.ref.hours} ชม.` : ''}</div>
                    </div>
                    <div className="row-tail">
                      <span className="avatar" style={{ background: emp.color }}>{emp.avatar}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          );
        })}

        {events.length === 0 && (
          <div className="empty">ไม่มีการลาหรือกิจกรรมในวันนี้</div>
        )}
      </div>

      <div className="day-panel-footer">
        <button className="btn btn-ghost flex-1" onClick={() => onAction && onAction('leave', date)}>
          <Icon name="plane" size={14}/> ลา
        </button>
        <button className="btn btn-ghost flex-1" onClick={() => onAction && onAction('special', date)}>
          <Icon name="star" size={14}/> หยุดพิเศษ
        </button>
        <button className="btn btn-ghost flex-1" onClick={() => onAction && onAction('ot', date)}>
          <Icon name="sparkle" size={14}/> OT
        </button>
        <button className="btn btn-primary flex-1" onClick={() => onAction && onAction('swap', date)}>
          <Icon name="swap" size={14}/> สลับ
        </button>
      </div>
    </div>
  );
};

window.DayPanel = DayPanel;
window.TYPE_LABEL = TYPE_LABEL;