'use client';

import { useState, useEffect, ReactNode } from 'react';
import { UserProvider, useUser } from './user-context';
import { UserSwitcher } from './user-switcher';
import { MainNav } from './main-nav';
import { InitWizard } from './init-wizard';
import { Loader2 } from 'lucide-react';

function AppContent({ children }: { children: ReactNode }) {
  const { isLoading, isInitialized, users, refreshUsers } = useUser();
  const [showWizard, setShowWizard] = useState(false);

  useEffect(() => {
    if (!isLoading && users.length === 0) {
      setShowWizard(true);
    }
  }, [isLoading, users.length]);

  const handleInitComplete = async () => {
    await refreshUsers();
    setShowWizard(false);
    window.location.reload();
  };

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="flex flex-col items-center gap-3">
          <Loader2 className="h-8 w-8 animate-spin text-teal-600" />
          <p className="text-sm text-muted-foreground">加载中...</p>
        </div>
      </div>
    );
  }

  if (showWizard) {
    return <InitWizard onComplete={handleInitComplete} />;
  }

  if (!isInitialized) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="flex flex-col items-center gap-3">
          <Loader2 className="h-8 w-8 animate-spin text-teal-600" />
          <p className="text-sm text-muted-foreground">初始化用户信息...</p>
        </div>
      </div>
    );
  }

  return (
    <>
      <MainNav />
      <main className="pt-14 pb-24 min-h-screen bg-slate-50">
        {children}
      </main>
      <UserSwitcher />
    </>
  );
}

export function AppShell({ children }: { children: ReactNode }) {
  return (
    <UserProvider>
      <AppContent>{children}</AppContent>
    </UserProvider>
  );
}