import { useState } from 'react';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { Button } from '@/components/ui/button';
import { Shield, Users, BarChart3, FileText, ArrowLeft } from 'lucide-react';
import { AdminDashboard } from '@/components/admin/AdminDashboard';
import AnalyticsDashboard from '@/components/admin/AnalyticsDashboard';
import ScriptReviewDashboard from '@/components/admin/ScriptReviewDashboard';
import { CreateAdminForm } from '@/components/admin/CreateAdminForm';
import { AdminUsersList } from '@/components/admin/AdminUsersList';
import { useAuth } from '@/contexts/AuthContext';

type AdminView = 'dashboard' | 'create-user' | 'users' | 'scripts' | 'analytics';

export default function AdminPanel() {
  const { user } = useAuth();
  const [currentView, setCurrentView] = useState<AdminView>('dashboard');

  // Check if user has admin access
  if (!user?.isAdmin) {
    return (
      <div className="min-h-screen flex flex-col bg-gradient-to-br from-background via-background to-primary/5">
        <Header onSearch={() => {}} />
        
        <main className="flex-1 container mx-auto px-4 py-16">
          <div className="max-w-2xl mx-auto text-center space-y-6">
            <Shield className="h-16 w-16 text-muted-foreground mx-auto" />
            <h1 className="text-4xl font-bold">Access Denied</h1>
            <p className="text-xl text-muted-foreground">
              You don&apos;t have permission to access the admin panel.
            </p>
            <Button onClick={() => window.history.back()}>
              Go Back
            </Button>
          </div>
        </main>

        <Footer />
      </div>
    );
  }

  const renderView = () => {
    switch (currentView) {
      case 'dashboard':
        return (
          <AdminDashboard
            onCreateUser={() => setCurrentView('create-user')}
            onViewScripts={() => setCurrentView('scripts')}
            onViewAnalytics={() => setCurrentView('analytics')}
          />
        );
      case 'create-user':
        return (
          <div className="space-y-6">
            <div className="flex items-center gap-4">
              <Button
                variant="outline"
                onClick={() => setCurrentView('dashboard')}
                className="flex items-center gap-2"
              >
                <ArrowLeft className="h-4 w-4" />
                Back to Dashboard
              </Button>
            </div>
            <CreateAdminForm onSuccess={() => setCurrentView('users')} />
          </div>
        );
      case 'users':
        return (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <Button
                  variant="outline"
                  onClick={() => setCurrentView('dashboard')}
                  className="flex items-center gap-2"
                >
                  <ArrowLeft className="h-4 w-4" />
                  Back to Dashboard
                </Button>
              </div>
              <Button onClick={() => setCurrentView('create-user')}>
                <Users className="h-4 w-4 mr-2" />
                Create Admin User
              </Button>
            </div>
            <AdminUsersList />
          </div>
        );
      case 'scripts':
        return <ScriptReviewDashboard onBack={() => setCurrentView('dashboard')} />;
      case 'analytics':
        return <AnalyticsDashboard onBack={() => setCurrentView('dashboard')} />;
      default:
        return null;
    }
  };

  return (
    <div className="min-h-screen flex flex-col bg-gradient-to-br from-background via-background to-primary/5">
      <Header onSearch={() => {}} />
      
      <main className="flex-1 container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto space-y-8">
          <div className="text-center space-y-4">
            <Shield className="h-16 w-16 text-primary mx-auto" />
            <h1 className="text-4xl font-bold">Admin Panel</h1>
            <p className="text-xl text-muted-foreground">
              Manage the platform and moderate content.
            </p>
            {user.isSuperUser && (
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200 rounded-full text-sm font-medium">
                <Shield className="h-4 w-4" />
                Super User Access
              </div>
            )}
          </div>
          
          {renderView()}
        </div>
      </main>

      <Footer />
    </div>
  );
}