import { useEffect } from 'react';
import useAttendanceStore from '../store/attendanceStore';
import { ClockControls } from '../components/ClockControls';
import { StatusBadge } from '../components/StatusBadge';
import { StatsSummary } from '../components/StatsSummary';
import { SessionList } from '../components/SessionList';

export function EmployeeApp() {
  const status = useAttendanceStore((s) => s.status);
  const busy = useAttendanceStore((s) => s.busy);
  const error = useAttendanceStore((s) => s.error);
  const live = useAttendanceStore((s) => s.live);
  const load = useAttendanceStore((s) => s.load);
  const recordEvent = useAttendanceStore((s) => s.recordEvent);
  const startPolling = useAttendanceStore((s) => s.startPolling);
  const stopPolling = useAttendanceStore((s) => s.stopPolling);

  useEffect(() => {
    load();
  }, [load]);

  useEffect(() => {
    if (status === null || status === 'clocked_out') {
      stopPolling();
      return;
    }
    startPolling();
    return () => stopPolling();
  }, [status, startPolling, stopPolling]);

  if (!status || !live) {
    return <div className="empty-line">&gt; načítám…</div>;
  }

  return (
    <>
      <div className="panel">
        <p className="panel-title">Docházka</p>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1rem' }}>
          <StatusBadge status={status} />
        </div>
        <ClockControls status={status} busy={busy} onAction={recordEvent} />
        {error && <div className="login-error">{error}</div>}
      </div>

      <div className="panel">
        <p className="panel-title">Statistiky &middot; tento měsíc</p>
        <StatsSummary
          totalWorkedMs={live.totalWorkedMs}
          totalBreakMs={live.totalBreakMs}
          shiftCount={live.shiftCount}
        />
      </div>

      <div className="panel">
        <p className="panel-title">Směny</p>
        <SessionList sessions={live.sessions} />
      </div>
    </>
  );
}