import { useEffect, useState } from 'react';
import { EmployeeManager } from '../components/EmployeeManager';
import { AdminStats } from '../components/AdminStats';
import { ShiftPlanManager } from '../components/ShiftPlanManager';
import { PayrollManager } from '../components/PayrollManager';

type Tab = 'employees' | 'stats' | 'shifts' | 'payroll';

export function AdminApp() {
  const [tab, setTab] = useState<Tab>('employees');

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      const target = e.target as HTMLElement;
      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
      if (e.key === '1') setTab('employees');
      if (e.key === '2') setTab('stats');
      if (e.key === '3') setTab('shifts');
      if (e.key === '4') setTab('payroll');
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <>
      <div className="tabs">
        <button
          className={`tab ${tab === 'employees' ? 'active' : ''}`}
          onClick={() => setTab('employees')}
        >
          [1] Zaměstnanci
        </button>
        <button className={`tab ${tab === 'stats' ? 'active' : ''}`} onClick={() => setTab('stats')}>
          [2] Statistiky
        </button>
        <button className={`tab ${tab === 'shifts' ? 'active' : ''}`} onClick={() => setTab('shifts')}>
          [3] Směny
        </button>
        <button className={`tab ${tab === 'payroll' ? 'active' : ''}`} onClick={() => setTab('payroll')}>
          [4] Mzdy
        </button>
      </div>

      <div style={{ marginTop: '1rem' }}>
        {tab === 'employees' && <EmployeeManager />}
        {tab === 'stats' && <AdminStats />}
        {tab === 'shifts' && <ShiftPlanManager />}
        {tab === 'payroll' && <PayrollManager />}
      </div>
    </>
  );
}