// =============================================================
// App.jsx — メインアプリ（ルーティング・状態管理）
// =============================================================

const { useState, useEffect, useCallback } = React;

const App = () => {
  const [appData,      setAppData]      = useState(null);
  const [screen,       setScreen]       = useState(null);
  const [screenParams, setScreenParams] = useState({});

  // ─── 初期化 ───────────────────────────────────────────────
  useEffect(() => {
    const d = window.StorageUtils.init();
    setAppData(d);
    setScreen(d.role === 'admin' ? 'HOME_ADMIN' : 'HOME_FIELD');
  }, []);

  // ─── 画面遷移（params 付き） ──────────────────────────────
  const navigate = useCallback((s, params = {}) => {
    setScreen(s);
    setScreenParams(params);
  }, []);

  // ─── ロール切り替え ───────────────────────────────────────
  const handleRoleChange = useCallback((newRole) => {
    const updated = window.StorageUtils.update(d => ({ ...d, role: newRole }));
    setAppData(updated);
    setScreen(newRole === 'admin' ? 'HOME_ADMIN' : 'HOME_FIELD');
    setScreenParams({});
  }, []);

  // ─── データ再読み込み（子画面が保存後に呼ぶ） ─────────────
  const refreshData = useCallback(() => {
    setAppData(window.StorageUtils.get());
  }, []);

  // ─── ローディング ─────────────────────────────────────────
  if (!appData || !screen) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-slate-50">
        <div className="flex flex-col items-center gap-3">
          <div className="w-8 h-8 border-[3px] border-indigo-400 border-t-transparent rounded-full animate-spin" />
          <p className="text-slate-400 text-sm">初期化中...</p>
        </div>
      </div>
    );
  }

  const { role } = appData;
  const isField  = role === 'field';

  // pending（未報告）と rejected（差戻し）のみ要対応として通知
  const hasPendingCorrection = (appData.correctionOrders || []).some(
    o => o.status === 'pending' || o.status === 'rejected'
  );

  // ─── 画面レンダリング ─────────────────────────────────────
  const renderScreen = () => {
    const props = { appData, navigate, refreshData, screenParams };

    if (isField) {
      switch (screen) {
        case 'HOME_FIELD':           return <HomeField           {...props} />;
        case 'CHECK_INPUT':          return <CheckInput          {...props} />;
        case 'CHECK_HISTORY':        return <CheckHistory        {...props} />;
        case 'CHECK_HISTORY_DETAIL': return <CheckHistoryDetail  {...props} />;
        case 'CORRECTION_LIST_FIELD':   return <CorrectionListField   {...props} />;
        case 'CORRECTION_DETAIL_FIELD': return <CorrectionDetailField {...props} />;
        case 'CORRECTION_REPORT_INPUT': return <CorrectionReportInput {...props} />;
        default: return <PlaceholderScreen screenKey={screen} />;
      }
    }
    // 管理者画面
    switch (screen) {
      case 'HOME_ADMIN':             return <AdminHome              {...props} />;
      case 'DASHBOARD_MONTHLY':      return <AdminDashboardMonthly  {...props} />;
      case 'CENTER_DETAIL':          return <AdminCenterDetail       {...props} />;
      case 'CSV_EXPORT':             return <AdminCsvExport          {...props} />;
      case 'INCIDENT_LIST':          return <AdminIncidentList        {...props} />;
      case 'CORRECTION_LIST_ADMIN':  return <CorrectionListAdmin    {...props} />;
      case 'CORRECTION_CREATE':      return <CorrectionCreate       {...props} />;
      case 'CORRECTION_RESULT':      return <CorrectionResult       {...props} />;
      default: return <PlaceholderScreen screenKey={screen} />;
    }
  };

  // ─── 現場担当者レイアウト ─────────────────────────────────
  if (isField) {
    return (
      <div className="min-h-screen bg-slate-50 font-sans">
        <Header role={role} onRoleChange={handleRoleChange} />
        {/* PC: サイドバー + メイン。モバイル: BottomNav */}
        <FieldSidebar
          currentScreen={screen}
          navigate={navigate}
          hasPendingCorrection={hasPendingCorrection}
        />
        <main className="pt-14 pb-16 md:pb-0 md:ml-52 min-h-screen">
          {renderScreen()}
        </main>
        {/* モバイルのみ表示 */}
        <div className="md:hidden">
          <FieldBottomNav
            currentScreen={screen}
            navigate={navigate}
            hasPendingCorrection={hasPendingCorrection}
          />
        </div>
      </div>
    );
  }

  // ─── 管理者レイアウト ─────────────────────────────────────
  return (
    <div className="min-h-screen bg-slate-100 font-sans flex flex-col">
      <Header role={role} onRoleChange={handleRoleChange} />
      <div className="flex flex-1 pt-14 min-h-screen">
        <AdminSidebar currentScreen={screen} navigate={navigate} />
        <main className="flex-1 ml-52 overflow-auto">
          {renderScreen()}
        </main>
      </div>
    </div>
  );
};

const _root = ReactDOM.createRoot(document.getElementById('root'));
_root.render(<App />);