// My Attendance — a logged-in employee's own attendance: today's actions
// (check in / break / check out) + stat cards + a history table where every
// break session is listed on its own line. Rendered as a full page (side-menu
// "My Attendance") and, in compact mode, as a Dashboard card.
(() => {
  const { useState, useEffect, useCallback } = React;
  const Icon = window.Icon || (() => null);

  function fmtTime(t) {
    if (!t) return '—';
    try { return new Date(String(t).replace(' ', 'T') + (String(t).includes('Z') ? '' : 'Z')).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }); }
    catch { return '—'; }
  }
  function fmtDate(d) {
    if (!d) return '—';
    try { return new Date(String(d).slice(0, 10) + 'T00:00:00').toLocaleDateString('en', { day: '2-digit', month: 'short', year: 'numeric' }); }
    catch { return String(d).slice(0, 10); }
  }
  function minsBetween(a, b) { try { return Math.max(0, Math.round((new Date(b) - new Date(a)) / 60000)); } catch { return 0; } }
  function fmtDur(mins) {
    mins = Math.round(mins || 0);
    const h = Math.floor(mins / 60), m = mins % 60;
    return h ? `${h}h ${m}m` : `${m}m`;
  }
  function breaksOf(a) { return Array.isArray(a && a.breaks) ? a.breaks : []; }

  function StatBox({ label, value, sub, tone }) {
    return (
      <div style={{ flex: 1, minWidth: 150, background: 'var(--slate-0, #fff)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '14px 16px' }}>
        <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--text-subtle)' }}>{label}</div>
        <div style={{ fontSize: 'var(--text-2xl)', fontWeight: 'var(--fw-extrabold)', color: tone || 'var(--text-strong)', marginTop: 4 }}>{value}</div>
        {sub ? <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 2 }}>{sub}</div> : null}
      </div>
    );
  }

  function MyAttendance({ compact }) {
    const [today, setToday] = useState(null);
    const [linked, setLinked] = useState(true);
    const [rows, setRows] = useState([]);
    const [loading, setLoading] = useState(true);
    const [busy, setBusy] = useState(false);

    const load = useCallback(async () => {
      if (!window.API || !window.API.getMyAttendance) { setLinked(false); setLoading(false); return; }
      try {
        const t = await window.API.getMyAttendance();
        setLinked(t.linked !== false);
        setToday(t.data || null);
      } catch {}
      try {
        const h = await window.API.getMyAttendanceHistory();
        if (h.data) setRows(h.data);
      } catch {}
      setLoading(false);
    }, []);
    useEffect(() => { load(); }, [load]);

    async function act(fn) {
      if (busy || !fn) return;
      setBusy(true);
      try { const r = await fn(); if (r.data) { setToday(r.data); load(); } else if (r.message) alert(r.message); }
      catch { alert('Could not update attendance. Please try again.'); }
      setBusy(false);
    }

    if (loading) return <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading…</div>;
    if (!linked) return (
      <div style={{ padding: 28, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>
        You are not in the employee directory yet. Ask an admin to add you (with your email) to use attendance.
      </div>
    );

    const checkedIn = !!(today && today.check_in);
    const checkedOut = !!(today && today.check_out);
    const onBreak = checkedIn && !checkedOut && breaksOf(today).some(b => b && b.in && !b.out);

    // Stats across loaded history (last 30 days by default).
    let totalBreak = 0, totalWorked = 0, days = 0;
    rows.forEach(r => {
      const bm = Number(r.break_minutes) || breaksOf(r).reduce((s, b) => s + (b.in && b.out ? minsBetween(b.in, b.out) : 0), 0);
      totalBreak += bm;
      totalWorked += (Number(r.worked_hours) || 0) * 60;
      if (r.check_in) days++;
    });
    const avgBreak = days ? Math.round(totalBreak / days) : 0;

    const actionBar = (
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {!checkedIn ? (
          <button onClick={() => act(window.API.selfCheckIn)} disabled={busy} style={btn('var(--green-600)')}>{busy ? '…' : 'Check in'}</button>
        ) : checkedOut ? (
          <>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--green-700)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', marginRight: 4 }}><Icon name="check" size={16} /> Done for today</span>
            <button onClick={() => act(window.API.selfUndoCheckout)} disabled={busy} style={btn('var(--slate-600)')}>{busy ? '…' : 'Undo checkout'}</button>
            <button onClick={() => act(window.API.selfCheckInAgain)} disabled={busy} style={btn('var(--green-600)')}>{busy ? '…' : 'Check in again'}</button>
          </>
        ) : onBreak ? (
          <>
            <button onClick={() => act(window.API.selfBreakOut)} disabled={busy} style={btn('var(--amber-600)')}>{busy ? '…' : 'End break'}</button>
            <button onClick={() => act(window.API.selfCheckOut)} disabled={busy} style={btn('var(--slate-800)')}>{busy ? '…' : 'Check out'}</button>
          </>
        ) : (
          <>
            <button onClick={() => act(window.API.selfBreakIn)} disabled={busy} style={btn('var(--amber-600)')}>{busy ? '…' : 'Start break'}</button>
            <button onClick={() => act(window.API.selfCheckOut)} disabled={busy} style={btn('var(--slate-800)')}>{busy ? '…' : 'Check out'}</button>
          </>
        )}
      </div>
    );

    function btn(bg) { return { height: 38, padding: '0 16px', background: bg, color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', cursor: busy ? 'wait' : 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)' }; }

    // Today summary line
    const todayLine = !checkedIn ? 'Not checked in yet'
      : `Checked in ${fmtTime(today.check_in)}` + (checkedOut ? ` · Checked out ${fmtTime(today.check_out)}` : onBreak ? ' · On break' : '');

    const statCards = (
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 16 }}>
        <StatBox label="Today" value={checkedIn ? (checkedOut ? `${Number(today.worked_hours) || 0}h` : (onBreak ? 'On break' : 'Working')) : '—'} sub={todayLine} tone={onBreak ? 'var(--amber-600)' : 'var(--blue-600)'} />
        <StatBox label="Hours worked" value={fmtDur(totalWorked)} sub="breaks excluded · last 30 days" tone="var(--green-600)" />
        <StatBox label="Time on break" value={fmtDur(totalBreak)} sub={`${fmtDur(avgBreak)} a day`} tone="var(--amber-600)" />
      </div>
    );

    const table = (
      <div className="tf-scroll-x" style={{ overflowX: 'auto', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)' }}>
        <table style={{ width: '100%', minWidth: 780, borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ borderBottom: '1px solid var(--border-subtle)', background: 'var(--slate-50)' }}>
              {['Date', 'Check in', 'Check out', 'Late', 'Early leave', 'Breaks', 'Break total', 'Worked', 'Status'].map((h, i) => (
                <th key={i} style={{ textAlign: (i >= 3 && i <= 4) || (i >= 6 && i <= 7) ? 'right' : 'left', padding: '10px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-subtle)', whiteSpace: 'nowrap' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && <tr><td colSpan={9} style={{ padding: 30, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No attendance recorded yet.</td></tr>}
            {rows.map(r => {
              const bks = breaksOf(r);
              const bm = Number(r.break_minutes) || bks.reduce((s, b) => s + (b.in && b.out ? minsBetween(b.in, b.out) : 0), 0);
              return (
                <tr key={r.id} style={{ borderBottom: '1px solid var(--border-subtle)', verticalAlign: 'top' }}>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace: 'nowrap' }}>{fmtDate(r.date)}{r.is_late ? <span style={{ marginLeft: 8, fontSize: 'var(--text-2xs)', color: 'var(--amber-600)', fontWeight: 'var(--fw-bold)' }}>LATE</span> : null}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)', whiteSpace: 'nowrap' }}>{fmtTime(r.check_in)}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)', whiteSpace: 'nowrap' }}>{fmtTime(r.check_out)}</td>
                  {/* Own lateness against the assigned shift — visible to the employee too. */}
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign: 'right', whiteSpace: 'nowrap', fontWeight: r.late_minutes ? 'var(--fw-bold)' : 'var(--fw-regular)', color: r.late_minutes ? 'var(--red-600)' : 'var(--text-subtle)' }}>{r.late_minutes ? fmtDur(r.late_minutes) : (r.check_in ? 'On time' : '—')}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign: 'right', whiteSpace: 'nowrap', fontWeight: r.early_leave_minutes ? 'var(--fw-bold)' : 'var(--fw-regular)', color: r.early_leave_minutes ? 'var(--amber-600)' : 'var(--text-subtle)' }}>{r.early_leave_minutes ? fmtDur(r.early_leave_minutes) : (r.check_out ? 'Full day' : '—')}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
                    {bks.length === 0 ? '—' : bks.map((b, i) => (
                      <div key={i} style={{ whiteSpace: 'nowrap' }}>{fmtTime(b.in)} – {b.out ? fmtTime(b.out) : 'ongoing'}{b.in && b.out ? ` (${fmtDur(minsBetween(b.in, b.out))})` : ''}</div>
                    ))}
                  </td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign: 'right', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{bm ? fmtDur(bm) : '—'}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign: 'right', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace: 'nowrap' }}>{r.worked_hours ? Number(r.worked_hours) + 'h' + (Number(r.overtime_hours) ? ` (+${Number(r.overtime_hours)} OT)` : '') : '—'}</td>
                  <td style={{ padding: '10px 14px', whiteSpace: 'nowrap' }}>
                    <span style={{ fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', color: r.status === 'present' ? 'var(--green-600)' : r.status === 'on_break' ? 'var(--amber-600)' : 'var(--text-muted)' }}>{r.status === 'on_break' ? 'on break' : (r.status || '—')}</span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );

    // Compact = dashboard card (today actions + stats + short table)
    if (compact) {
      return (
        <div style={{ background: 'var(--slate-0, #fff)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 14, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>My attendance</div>
              <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 2 }}>{todayLine}</div>
            </div>
            {actionBar}
          </div>
          {statCards}
          {table}
        </div>
      );
    }

    // Full page
    return (
      <div style={{ padding: 24, maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 18, flexWrap: 'wrap' }}>
          <div>
            <h1 style={{ fontSize: 'var(--text-3xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em' }}>My attendance</h1>
            <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{todayLine}</p>
          </div>
          {actionBar}
        </div>
        {statCards}
        {table}
      </div>
    );
  }

  window.MyAttendance = MyAttendance;
})();