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

type Tab = 'employees' | 'stats';

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');
    }
    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>
      </div>

      <div style={{ marginTop: '1rem' }}>
        {tab === 'employees' ? <EmployeeManager /> : <AdminStats />}
      </div>
    </>
  );
}
