// Leaves page — list + filter + request form

const LeavesPage = ({ data, openModal, role, currentUser, refresh }) => {
  const [tab, setTab] = React.useState('all');
  const [typeFilter, setTypeFilter] = React.useState('all');
  const [editingLeave, setEditingLeave] = React.useState(null);
  const empMap = Object.fromEntries(data.employees.map(e => [e.id, e]));

  const decide = async (id, status) => {
    try { await window.API.updateLeave(id, { status }); if (refresh) await refresh(); }
    catch (e) { alert(e.message); }
  };

  let items = role === 'employee'
    ? data.leaves.filter(l => l.empId === currentUser.id)
    : [...data.leaves];

  if (tab === 'pending')  items = items.filter(l => l.status === 'pending');
  if (tab === 'approved') items = items.filter(l => l.status === 'approved');
  if (typeFilter !== 'all') items = items.filter(l => l.type === typeFilter);

  items.sort((a, b) => b.requestedOn.localeCompare(a.requestedOn));

  return (
    <div data-screen-label="Leaves">
      <div className="row between mb-3">
        <div>
          <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-.02em' }}>
            {role === 'employee' ? 'การลาของฉัน' : 'จัดการการลา'}
          </div>
          <div className="text-sm muted">ลาพักร้อน ลากิจ ลาป่วย และอนุมัติคำขอ</div>
        </div>
        <button className="btn btn-primary" onClick={() => openModal({ type: 'leave-form' })}>
          <Icon name="plus" size={14}/> {role === 'employee' ? 'ขอลาใหม่' : 'สร้างคำขอ'}
        </button>
      </div>

      {(() => {
        const my = data.leaves.filter(l => l.empId === currentUser.id && l.status === 'approved');
        const sumDays = (t) => my.filter(l => l.type === t).reduce((s, l) => s + l.days, 0);
        const used = { vacation: sumDays('vacation'), personal: sumDays('personal'), sick: sumDays('sick') };
        return (
          <div className="stats-row" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
            <QuotaCard label="พักร้อน (Vacation)" used={used.vacation} quota={data.settings.leaveQuota.vacation} icon="vacationV" cls="vac"/>
            <QuotaCard label="ลากิจ (Personal)"   used={used.personal} quota={data.settings.leaveQuota.personal} icon="coffee" cls="pers"/>
            <QuotaCard label="ลาป่วย (Sick)"      used={used.sick}     quota={data.settings.leaveQuota.sick}     icon="pill"  cls="sick"/>
          </div>
        );
      })()}

      <div className="card">
        <div className="card-header">
          <div className="row" style={{ gap: 16 }}>
            <div className="tabs" style={{ marginBottom: 0, borderBottom: 'none' }}>
              {[{id:'all',l:'ทั้งหมด'},{id:'pending',l:'รออนุมัติ'},{id:'approved',l:'อนุมัติแล้ว'}].map(t => (
                <button key={t.id} className={`tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>{t.l}</button>
              ))}
            </div>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <select value={typeFilter} onChange={e => setTypeFilter(e.target.value)} style={{
              padding: '6px 10px', borderRadius: 7, border: '1px solid var(--ink-200)', background: 'var(--paper)', fontSize: 12
            }}>
              <option value="all">ทุกประเภท</option>
              <option value="vacation">พักร้อน</option>
              <option value="personal">ลากิจ</option>
              <option value="sick">ลาป่วย</option>
            </select>
            <button className="btn btn-ghost btn-sm"><Icon name="download" size={13}/> Export</button>
          </div>
        </div>

        <table className="t">
          <thead>
            <tr>
              <th>พนักงาน</th>
              <th>ประเภท</th>
              <th>วันที่</th>
              <th className="num">วัน</th>
              <th>เหตุผล</th>
              <th>สถานะ</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {items.map(l => {
              const emp = empMap[l.empId];
              const meta = TYPE_LABEL[l.type];
              return (
                <tr key={l.id}>
                  <td>
                    <div className="row" style={{ gap: 8 }}>
                      <span className="avatar" style={{ background: emp.color, width: 26, height: 26, fontSize: 10 }}>{emp.avatar}</span>
                      <div>
                        <div style={{ fontWeight: 500 }}>{emp.name}</div>
                        <div className="text-xs muted">{emp.role}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <span className={`chip chip-${meta.cls}`}><Icon name={meta.icon} size={11}/>{meta.th}</span>
                  </td>
                  <td className="num text-sm">
                    {window.APP_HELPERS.fmtThaiDate(l.from, {shortMonth:true})}
                    {l.from !== l.to && ` – ${window.APP_HELPERS.fmtThaiDate(l.to, {shortMonth:true})}`}
                  </td>
                  <td className="num">{l.days}</td>
                  <td className="text-sm muted" style={{ maxWidth: 200 }}>{l.reason}</td>
                  <td>
                    <span className={`chip chip-${l.status === 'approved' ? 'approved' : 'pending'}`}>
                      <span className="chip-dot"/>{l.status === 'approved' ? 'อนุมัติ' : 'รออนุมัติ'}
                    </span>
                  </td>
                  <td>
                    {l.status === 'pending' && role === 'admin' ? (
                      <div className="row" style={{ gap: 2 }}>
                        <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--swap)' }} title="อนุมัติ" onClick={() => decide(l.id, 'approved')}><Icon name="check" size={14}/></button>
                        <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--sick)' }} title="ปฏิเสธ" onClick={() => decide(l.id, 'rejected')}><Icon name="x" size={14}/></button>
                      </div>
                    ) : (
                      <div className="row" style={{ gap: 2 }}>
                        {(role === 'employee' && l.empId === currentUser.id) && (
                          <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--brand-600)' }} title="แก้ไข" onClick={() => setEditingLeave(l)}>
                            <Icon name="edit" size={14}/>
                          </button>
                        )}
                        <button className="icon-btn" style={{ width: 28, height: 28 }}><Icon name="eye" size={14}/></button>
                      </div>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {items.length === 0 && <div className="empty">ไม่มีรายการ</div>}
      </div>

      {editingLeave && (
        <EditLeaveModal
          leave={editingLeave}
          onClose={() => setEditingLeave(null)}
        />
      )}
    </div>
  );
};

const QuotaCard = ({ label, used, quota, icon, cls }) => (
  <div className="stat">
    <div className={`stat-icon`} style={{
      background: `var(--${cls === 'vac' ? 'vac' : cls === 'pers' ? 'pers' : 'sick'}-bg)`,
      color: `var(--${cls === 'vac' ? 'vac' : cls === 'pers' ? 'pers' : 'sick'})`
    }}><Icon name={icon}/></div>
    <div className="stat-label">{label}</div>
    <div className="stat-value">{used}<span style={{fontSize:14,color:'var(--ink-400)',fontWeight:500}}> / {quota} วัน</span></div>
    <div className="bar mt-2" style={{
      ['--bar-c']: `var(--${cls === 'vac' ? 'vac' : cls === 'pers' ? 'pers' : 'sick'})`
    }}>
      <span style={{ width: `${Math.min(100, used/quota*100)}%`, background: `var(--${cls === 'vac' ? 'vac' : cls === 'pers' ? 'pers' : 'sick'})` }}/>
    </div>
    <div className="stat-meta mt-2">เหลือ <strong>{quota - used} วัน</strong></div>
  </div>
);

// ───── Leave Request Modal ─────
const LeaveModal = ({ onClose, currentUser, data, refresh }) => {
  const [type, setType] = React.useState('vacation');
  const [from, setFrom] = React.useState('2026-05-25');
  const [to, setTo] = React.useState('2026-05-25');
  const [reason, setReason] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const days = Math.max(1, Math.round((new Date(to) - new Date(from)) / (1000*60*60*24)) + 1);

  const submit = async () => {
    setBusy(true); setErr(null);
    try {
      await window.API.createLeave({ type, from, to, days, reason });
      if (refresh) await refresh();
      onClose();
    } catch (e) { setErr(e.message); setBusy(false); }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <div className="modal-title">ขอลางาน</div>
            <div className="text-xs muted mt-2">{currentUser.name} · {currentUser.role}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>ประเภทการลา</label>
            <div className="row" style={{ gap: 8 }}>
              {[
                { id: 'vacation', l: 'พักร้อน', icon: 'vacationV' },
                { id: 'personal', l: 'ลากิจ',  icon: 'coffee' },
                { id: 'sick',     l: 'ลาป่วย', icon: 'pill' },
              ].map(t => (
                <button key={t.id} className={`btn flex-1 ${type === t.id ? 'btn-primary' : 'btn-ghost'}`} onClick={() => setType(t.id)}>
                  <Icon name={t.icon} size={14}/> {t.l}
                </button>
              ))}
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>ตั้งแต่วันที่</label>
              <input type="date" value={from} onChange={e => { setFrom(e.target.value); if (e.target.value > to) setTo(e.target.value); }}/>
            </div>
            <div className="field">
              <label>ถึงวันที่</label>
              <input type="date" value={to} onChange={e => setTo(e.target.value)}/>
            </div>
          </div>
          <div className="row" style={{ background: 'var(--brand-50)', padding: 12, borderRadius: 8, gap: 10, marginBottom: 14 }}>
            <Icon name="info" size={16} style={{ color: 'var(--brand-700)' }}/>
            <div className="text-sm" style={{ color: 'var(--brand-800)' }}>
              จำนวนวันลา: <strong>{days} วัน</strong> · โควต้าคงเหลือ {(() => {
                const usedDays = (data.leaves || []).filter(l => l.empId === currentUser.id && l.type === type && l.status === 'approved').reduce((s, l) => s + l.days, 0);
                return Math.max(0, (data.settings.leaveQuota[type] || 0) - usedDays);
              })()} วัน
            </div>
          </div>
          <div className="field">
            <label>เหตุผล / รายละเอียด</label>
            <textarea value={reason} onChange={e => setReason(e.target.value)} placeholder="เช่น พาครอบครัวไปต่างจังหวัด, นัดหมอ, ปวดท้อง"/>
          </div>
          <div className="field">
            <label>แนบไฟล์ (ถ้ามี)</label>
            <div style={{ border: '1px dashed var(--ink-300)', borderRadius: 8, padding: 14, textAlign: 'center', color: 'var(--ink-500)' }} className="text-sm">
              <Icon name="file" size={20} style={{ marginBottom: 4 }}/>
              <div>ลากไฟล์มาวาง หรือคลิกเลือก · ใบรับรองแพทย์ ฯลฯ</div>
            </div>
          </div>
        </div>
        {err && <div style={{ padding:'8px 16px', color:'#b91c1c', fontSize:12 }}>{err}</div>}
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>ยกเลิก</button>
          <button className="btn btn-primary" onClick={submit} disabled={busy}>{busy ? 'กำลังส่ง…' : 'ส่งคำขอ'}</button>
        </div>
      </div>
    </div>
  );
};

window.LeavesPage = LeavesPage;
window.LeaveModal = LeaveModal;

// ───── Edit Leave Modal ─────
const EditLeaveModal = ({ leave, onClose }) => {
  const [type, setType] = React.useState(leave.type);
  const [from, setFrom] = React.useState(leave.from);
  const [to, setTo] = React.useState(leave.to);
  const [reason, setReason] = React.useState(leave.reason || '');

  const days = Math.max(1, Math.round((new Date(to) - new Date(from)) / (1000*60*60*24)) + 1);
  const changed = (type !== leave.type || from !== leave.from || to !== leave.to || reason !== leave.reason);
  const wasApproved = leave.status === 'approved';

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <div className="modal-title">แก้ไขคำขอลา</div>
            <div className="text-xs muted mt-2">คำขอ #{leave.id} · ยื่นเมื่อ {window.APP_HELPERS.fmtThaiDate(leave.requestedOn, { shortMonth: true })}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>ประเภทการลา</label>
            <div className="row" style={{ gap: 8 }}>
              {[
                { id: 'vacation', l: 'พักร้อน', icon: 'vacationV' },
                { id: 'personal', l: 'ลากิจ',  icon: 'coffee' },
                { id: 'sick',     l: 'ลาป่วย', icon: 'pill' },
              ].map(t => (
                <button key={t.id} className={`btn flex-1 ${type === t.id ? 'btn-primary' : 'btn-ghost'}`} onClick={() => setType(t.id)}>
                  <Icon name={t.icon} size={14}/> {t.l}
                </button>
              ))}
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>ตั้งแต่วันที่</label>
              <input type="date" value={from} onChange={e => { setFrom(e.target.value); if (e.target.value > to) setTo(e.target.value); }}/>
            </div>
            <div className="field">
              <label>ถึงวันที่</label>
              <input type="date" value={to} onChange={e => setTo(e.target.value)}/>
            </div>
          </div>

          <div className="row" style={{ background: 'var(--brand-50)', padding: 12, borderRadius: 8, gap: 10, marginBottom: 14 }}>
            <Icon name="info" size={16} style={{ color: 'var(--brand-700)' }}/>
            <div className="text-sm" style={{ color: 'var(--brand-800)' }}>
              จำนวนวันลาใหม่: <strong>{days} วัน</strong> {leave.days !== days && <span className="text-xs muted">(เดิม {leave.days} วัน)</span>}
            </div>
          </div>

          <div className="field">
            <label>เหตุผล / รายละเอียด</label>
            <textarea value={reason} onChange={e => setReason(e.target.value)}/>
          </div>

          {wasApproved && (
            <div className="row" style={{ gap: 8, padding: 10, background: '#fef3c7', borderRadius: 8, marginBottom: 8 }}>
              <Icon name="alert" size={14} style={{ color: '#92400e' }}/>
              <div className="text-xs" style={{ color: '#92400e' }}>
                คำขอนี้ถูกอนุมัติแล้ว · การแก้ไขจะส่งให้ Admin ตรวจสอบและอนุมัติใหม่อีกครั้ง
              </div>
            </div>
          )}
        </div>
        <div className="modal-footer">
          <button className="btn btn-danger btn-sm" style={{ marginRight: 'auto' }} onClick={onClose} title="ยกเลิกคำขอนี้">
            <Icon name="trash" size={13}/> ยกเลิกคำขอ
          </button>
          <button className="btn btn-ghost" onClick={onClose}>ปิด</button>
          <button className="btn btn-primary" disabled={!changed} onClick={onClose}>
            <Icon name="check" size={14}/> บันทึกการแก้ไข
          </button>
        </div>
      </div>
    </div>
  );
};

window.EditLeaveModal = EditLeaveModal;