"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import axios from "axios";
import AdminLayout from "../../components/AdminLayout";
import AdminDashboard from "../../components/AdminDashboard";
import UserManagement from "../../components/UserManagement";
import JobManagement from "../../components/JobManagement";
import TokenManagement from "../../components/TokenManagement";
import SystemStats from "../../components/SystemStats";
import DeveloperTools from "../../components/DeveloperTools";

interface User {
  id: string;
  email: string;
  first_name: string;
  last_name: string;
  role: string;
  company_name?: string;
  avatar_url?: string;
  is_active: boolean;
  last_login_at?: string;
  email_verified_at?: string;
  created_at: string;
  updated_at: string;
}

interface SystemStatistics {
  total_users: number;
  active_users: number;
  total_jobs: number;
  total_interviews: number;
  total_tokens_purchased: number;
  total_tokens_used: number;
  total_revenue: number;
  generated_at: string;
}

export default function AdminPage() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState("dashboard");
  const [systemStats, setSystemStats] = useState<SystemStatistics | null>(null);
  const router = useRouter();

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      router.push("/login");
      return;
    }

    // Verify token and check if user is admin
    axios.get(`${process.env.NEXT_PUBLIC_API_URL}/rest/auth/me`, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
    .then(response => {
      const userData = response.data;
      if (userData.role !== 'admin') {
        router.push("/dashboard");
        return;
      }
      setUser(userData);
      
      // Fetch system statistics
      fetchSystemStats();
    })
    .catch(() => {
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      router.push("/login");
    })
    .finally(() => {
      setLoading(false);
    });
  }, [router]);

  const fetchSystemStats = async () => {
    try {
      const token = localStorage.getItem("token");
      const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/rest/admin/statistics`, {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      setSystemStats(response.data);
    } catch (error) {
      console.error("Failed to fetch system statistics:", error);
    }
  };

  const handleLogout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    router.push("/login");
  };

  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading admin dashboard...</p>
        </div>
      </div>
    );
  }

  const renderContent = () => {
    switch (activeTab) {
      case "dashboard":
        return <AdminDashboard stats={systemStats} onRefresh={fetchSystemStats} />;
      case "users":
        return <UserManagement />;
      case "jobs":
        return <JobManagement />;
      case "tokens":
        return <TokenManagement />;
      case "stats":
        return <SystemStats stats={systemStats} onRefresh={fetchSystemStats} />;
      case "devtools":
        return <DeveloperTools />;
      default:
        return <AdminDashboard stats={systemStats} onRefresh={fetchSystemStats} />;
    }
  };

  return (
    <AdminLayout
      user={user || undefined}
      activeTab={activeTab}
      onTabChange={handleTabChange}
      onLogout={handleLogout}
    >
      {renderContent()}
    </AdminLayout>
  );
}