import { useState, useCallback } from 'react';
import ScheduleView from './components/ScheduleView.jsx';
import CarManagement from './components/CarManagement.jsx';
import TimelineView from './components/TimelineView.jsx';
import useWebSocket from './hooks/useWebSocket.js';
import styles from './App.module.css';

export default function App() {
  const [page, setPage] = useState('schedule');
  const [reloadKey, setReloadKey] = useState(0);

  const handleWsMessage = useCallback((msg) => {
    if (msg.type === 'data_changed') {
      setReloadKey((k) => k + 1);
    }
  }, []);

  const { status: wsStatus } = useWebSocket(handleWsMessage);

  return (
    <div className={styles.app}>
      <header className={styles.header}>
        <div className={styles.headerLeft}>
          <span
            className={`${styles.wsIndicator} ${styles['wsIndicator_' + wsStatus]}`}
            title={
              wsStatus === 'connected' ? 'リアルタイム同期: 接続中' :
              wsStatus === 'connecting' || wsStatus === 'disconnected' ? 'リアルタイム同期: 再接続中...' :
              'リアルタイム同期: 接続失敗'
            }
          />
          <h1 className={styles.title}>🚗 代車スケジュール管理</h1>
        </div>
        <nav className={styles.nav}>
          <button
            className={`${styles.navBtn} ${page === 'schedule' ? styles.active : ''}`}
            onClick={() => setPage('schedule')}
          >
            📅 スケジュール
          </button>
          <button
            className={`${styles.navBtn} ${page === 'timeline' ? styles.active : ''}`}
            onClick={() => setPage('timeline')}
          >
            📊 タイムライン
          </button>
          <button
            className={`${styles.navBtn} ${page === 'cars' ? styles.active : ''}`}
            onClick={() => setPage('cars')}
          >
            🚙 代車管理
          </button>
        </nav>
      </header>

      {wsStatus === 'error' && (
        <div className={styles.wsError}>
          ⚠️ サーバーとの接続が切断されました。ページを再読み込みしてください。
        </div>
      )}

      <main className={styles.main}>
        {page === 'schedule' && <ScheduleView reloadKey={reloadKey} />}
        {page === 'timeline' && <TimelineView reloadKey={reloadKey} />}
        {page === 'cars' && <CarManagement reloadKey={reloadKey} />}
      </main>
    </div>
  );
}