// Employee-facing screens
const { useState: useStateE, useMemo: useMemoE } = React;

function EmployeeApp({ me, rows, empTab, setEmpTab, todayState, todayCheckIn, todayNote, setTodayNote, onCheckIn, onCheckOut, onSwitchRole, onLogout, onChangePassword }) {
  return (
    <div className="screen">
      <header className="hdr">
        <div>
          <div className="hdr-eyebrow">AiiCafe · Chấm công</div>
          <div className="hdr-title">Xin chào, {me.name.split(' ').slice(-1)[0]}</div>
        </div>
        <button className="role-pill" onClick={onSwitchRole} title="Chuyển vai trò">
          <span className="role-dot emp" /> NV
        </button>
      </header>

      <main className="content">
        {empTab === 'home' && (
          <EmployeeHome
            me={me}
            rows={rows}
            todayState={todayState}
            todayCheckIn={todayCheckIn}
            todayNote={todayNote}
            setTodayNote={setTodayNote}
            onCheckIn={onCheckIn}
            onCheckOut={onCheckOut}
            goHistory={() => setEmpTab('history')}
          />
        )}
        {empTab === 'history' && <EmployeeHistory rows={rows} />}
        {empTab === 'salary' && <EmployeeSalary me={me} rows={rows} onLogout={onLogout} onChangePassword={onChangePassword} />}
      </main>

      <TabBar
        tabs={[
          { id: 'home', label: 'Chấm công', icon: 'home' },
          { id: 'history', label: 'Lịch sử', icon: 'list' },
          { id: 'salary', label: 'Lương', icon: 'wallet' },
        ]}
        active={empTab}
        onChange={setEmpTab}
      />
    </div>
  );
}

function EmployeeHome({ me, rows, todayState, todayCheckIn, todayNote, setTodayNote, onCheckIn, onCheckOut, goHistory }) {
  const todayRows = rows.filter((r) =>
    r.date.getDate() === TODAY.getDate() &&
    r.date.getMonth() === TODAY.getMonth()
  );
  const todayDone = todayRows[0];
  const last3 = rows.slice(0, 3);

  const dateStr = TODAY.toLocaleDateString('vi-VN', { weekday: 'long', day: '2-digit', month: '2-digit', year: 'numeric' });

  return (
    <div className="emp-home">
      <div className="big-clock-card">
        <div className="bc-date">{dateStr.charAt(0).toUpperCase() + dateStr.slice(1)}</div>
        <LiveClock />
        <div className="bc-shift">Ca làm: {String(SHIFT_START.h).padStart(2,'0')}:{String(SHIFT_START.m).padStart(2,'0')} – {String(SHIFT_END.h).padStart(2,'0')}:{String(SHIFT_END.m).padStart(2,'0')}</div>

        {todayDone ? (
          <div className="today-done">
            <div className="td-row">
              <span>Vào</span>
              <span className="mono">{String(todayDone.checkIn.h).padStart(2,'0')}:{String(todayDone.checkIn.m).padStart(2,'0')}</span>
            </div>
            <div className="td-row">
              <span>Ra</span>
              <span className="mono">{String(todayDone.checkOut.h).padStart(2,'0')}:{String(todayDone.checkOut.m).padStart(2,'0')}</span>
            </div>
            <div className="td-row">
              <span>Trạng thái</span>
              <StatusPill status={todayDone.status} />
            </div>
          </div>
        ) : todayState === 'out' ? (
          <button className="big-btn primary" onClick={onCheckIn}>
            Check-in vào ca
          </button>
        ) : (
          <div className="checkin-active">
            <div className="ci-meta">
              <span>Đã vào lúc</span>
              <span className="mono lg">{String(todayCheckIn.h).padStart(2,'0')}:{String(todayCheckIn.m).padStart(2,'0')}</span>
            </div>
            <label className="field">
              <span className="field-label">Ghi chú công việc</span>
              <textarea
                rows={2}
                placeholder="VD: Ca sáng quầy bar, hỗ trợ event…"
                value={todayNote}
                onChange={(e) => setTodayNote(e.target.value)}
              />
            </label>
            <button className="big-btn danger" onClick={onCheckOut}>
              Check-out kết ca
            </button>
          </div>
        )}
      </div>

      <section className="section">
        <div className="section-head">
          <h3>Gần đây</h3>
          <button className="link" onClick={goHistory}>Xem tất cả →</button>
        </div>
        <div className="list">
          {last3.map((r) => <HistoryRow key={r.id} row={r} />)}
        </div>
      </section>
    </div>
  );
}

function LiveClock() {
  const [now, setNow] = useStateE(new Date());
  React.useEffect(() => {
    const i = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(i);
  }, []);
  return (
    <div className="bc-time mono">
      {String(now.getHours()).padStart(2,'0')}
      <span className="bc-colon">:</span>
      {String(now.getMinutes()).padStart(2,'0')}
      <span className="bc-sec">:{String(now.getSeconds()).padStart(2,'0')}</span>
    </div>
  );
}

function HistoryRow({ row, onClick }) {
  const c = calcRow(row);
  return (
    <button className="hist-row" onClick={onClick}>
      <div className="hist-date">
        <div className="mono hd-day">{String(row.date.getDate()).padStart(2,'0')}</div>
        <div className="hd-month">th{row.date.getMonth() + 1}</div>
      </div>
      <div className="hist-mid">
        <div className="hist-times mono">
          {String(row.checkIn.h).padStart(2,'0')}:{String(row.checkIn.m).padStart(2,'0')}
          <span className="hist-arrow">→</span>
          {String(row.checkOut.h).padStart(2,'0')}:{String(row.checkOut.m).padStart(2,'0')}
        </div>
        <div className="hist-note">{row.note}</div>
      </div>
      <div className="hist-right">
        <div className="hist-hours mono">{c.total.toFixed(1)}h</div>
        <StatusPill status={row.status} small />
      </div>
    </button>
  );
}

function EmployeeHistory({ rows }) {
  const grouped = useMemoE(() => {
    const g = {};
    rows.forEach((r) => {
      const key = `Tháng ${r.date.getMonth() + 1}/${r.date.getFullYear()}`;
      if (!g[key]) g[key] = [];
      g[key].push(r);
    });
    return g;
  }, [rows]);

  return (
    <div className="emp-history">
      <h2 className="page-title">Lịch sử chấm công</h2>
      {Object.entries(grouped).map(([k, list]) => (
        <section key={k} className="section">
          <div className="month-head">
            <h3>{k}</h3>
            <span className="mono dim">{list.length} ngày</span>
          </div>
          <div className="list">
            {list.map((r) => <HistoryRow key={r.id} row={r} />)}
          </div>
        </section>
      ))}
    </div>
  );
}

function EmployeeSalary({ me, rows, onLogout, onChangePassword }) {
  const monthRows = rows.filter((r) => r.date.getMonth() === 3 && r.date.getFullYear() === 2026); // tháng 4/2026
  const p = calcPayroll(me, monthRows);

  return (
    <div className="emp-salary">
      <h2 className="page-title">Bảng lương</h2>
      <div className="month-switcher">
        <button className="ms-btn">‹</button>
        <div className="ms-label">Tháng 4 / 2026</div>
        <button className="ms-btn">›</button>
      </div>

      {p.empty ? (
        <div className="salary-empty">
          <div className="se-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="5" width="18" height="16" rx="2" />
              <line x1="3" y1="10" x2="21" y2="10" />
              <line x1="8" y1="3" x2="8" y2="7" />
              <line x1="16" y1="3" x2="16" y2="7" />
            </svg>
          </div>
          <div className="se-title">Chưa có dữ liệu chấm công</div>
          <div className="se-sub">
            Tháng này bạn chưa có ngày công nào được duyệt. Vào tab <b>Chấm công</b> để bắt đầu ca làm.
          </div>
          <div className="se-card">
            <div className="se-row">
              <span>Hình thức</span>
              <span>{me.employmentType === 'parttime' ? 'Part-time' : 'Full-time'}</span>
            </div>
            <div className="se-row"><span>Lương theo giờ</span><span className="mono">{fmtVND(me.hourly)}/h</span></div>
            <div className="se-row"><span>OT (sau {String(SHIFT_END.h).padStart(2,'0')}:{String(SHIFT_END.m).padStart(2,'0')})</span><span className="mono">{fmtVND(Math.round(me.hourly * 1.5))}/h</span></div>
            {me.allowance > 0 && (
              <div className="se-row"><span>Phụ cấp tháng</span><span className="mono">{fmtVND(me.allowance)}</span></div>
            )}
          </div>
          <div className="note-box">
            Lương sẽ được tính khi quản lý duyệt các lệnh chấm công của bạn.
          </div>
          <button className="change-pw-btn" onClick={onChangePassword}>Đổi mật khẩu</button>
          <button className="logout-btn" onClick={onLogout}>Đăng xuất</button>
        </div>
      ) : (
        <>
          <div className="salary-card">
            <div className="sc-eyebrow">Thực lãnh dự kiến</div>
            <div className="sc-amount mono">{fmtVND(p.net)}</div>
            <div className="sc-status">
              <span className="dot-status approved" /> Tính từ {p.days} ngày công đã duyệt
            </div>
          </div>

          <div className="kpi-grid">
            <div className="kpi"><div className="kpi-label">Số ngày công</div><div className="kpi-val mono">{p.days}</div></div>
            <div className="kpi"><div className="kpi-label">Tổng giờ</div><div className="kpi-val mono">{p.totalH.toFixed(1)}h</div></div>
            <div className="kpi"><div className="kpi-label">Tăng ca</div><div className="kpi-val mono">{p.ot.toFixed(1)}h</div></div>
            <div className="kpi"><div className="kpi-label">Đi muộn / về sớm</div><div className="kpi-val mono">{p.lateMin + p.earlyMin}p</div></div>
          </div>

          <div className="breakdown">
            <h3>Chi tiết</h3>
            <div className="bd-row"><span>Giờ thường ({p.regularH.toFixed(1)}h × {fmtVND(me.hourly)})</span><span className="mono">{fmtVND(p.regularPay)}</span></div>
            <div className="bd-row"><span>Tăng ca ({p.ot.toFixed(1)}h × {fmtVND(me.hourly)} × 1.5)</span><span className="mono pos">+ {fmtVND(p.otPay)}</span></div>
            {p.allowance > 0 && (
              <div className="bd-row"><span>Phụ cấp tháng</span><span className="mono">+ {fmtVND(p.allowance)}</span></div>
            )}
            <div className="bd-row total"><span>Thực lãnh</span><span className="mono">{fmtVND(p.net)}</span></div>
          </div>

          <div className="note-box">
            Lương tính theo giờ thực tế từ chấm công. Đi muộn / về sớm tự động trừ vì không tính giờ ngoài ca.
          </div>

          <button className="change-pw-btn" onClick={onChangePassword}>Đổi mật khẩu</button>
          <button className="logout-btn" onClick={onLogout}>Đăng xuất</button>
        </>
      )}
    </div>
  );
}

window.EmployeeApp = EmployeeApp;
window.HistoryRow = HistoryRow;