'use client';

import { useEffect, useState, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { AppProvider, useApp } from '@/lib/context';
import { setToken, fetchAlerts } from '@/lib/api';
import { getLocaleMap } from '@/lib/localization';
import type { AlertConfig } from '@/lib/types';
import type { LocaleMap } from '@/lib/localization';
import TimeRangeSelector from '@/components/TimeRangeSelector';
import AlertPanel from '@/components/AlertPanel';
import Dashboard from '@/components/Dashboard';

function AppShell({ alerts }: { alerts: AlertConfig[] }) {
  const { triggeredAlerts } = useApp();
  const [alertPanelOpen, setAlertPanelOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100">
      <header className="flex items-center justify-between px-4 py-2 border-b border-gray-800 bg-gray-900 sticky top-0 z-20">
        <span className="font-bold text-indigo-400 tracking-wide">Factorio Dashboard</span>
        <div className="flex items-center gap-4">
          <TimeRangeSelector />
          <button
            onClick={() => setAlertPanelOpen(true)}
            className="relative text-sm text-gray-300 hover:text-white px-3 py-1 rounded hover:bg-gray-800"
          >
            🔔 Alerts
            {triggeredAlerts.length > 0 && (
              <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
                {triggeredAlerts.length}
              </span>
            )}
          </button>
        </div>
      </header>

      <main className="p-4">
        <Dashboard alerts={alerts} />
      </main>

      <AlertPanel open={alertPanelOpen} onClose={() => setAlertPanelOpen(false)} />
    </div>
  );
}

function DashboardApp() {
  const searchParams = useSearchParams();
  const token = searchParams.get('token') ?? '';

  const [ready,     setReady]     = useState(false);
  const [alerts,    setAlerts]    = useState<AlertConfig[]>([]);
  const [localeMap, setLocaleMap] = useState<LocaleMap>(new Map());

  useEffect(() => {
    if (!token) return;
    setToken(token);
    Promise.all([getLocaleMap(), fetchAlerts()]).then(([lm, al]) => {
      setLocaleMap(lm);
      setAlerts(al);
      setReady(true);
    });
  }, [token]);

  if (!token) {
    return (
      <div className="flex min-h-screen items-center justify-center text-gray-400">
        Missing <code className="mx-1 bg-gray-800 px-1 rounded">?token=</code> in URL
      </div>
    );
  }

  if (!ready) {
    return (
      <div className="flex min-h-screen items-center justify-center text-gray-400">
        Loading…
      </div>
    );
  }

  return (
    <AppProvider token={token} localeMap={localeMap}>
      <AppShell alerts={alerts} />
    </AppProvider>
  );
}

export default function Page() {
  return (
    <Suspense>
      <DashboardApp />
    </Suspense>
  );
}