/**
 * Admin Control Panel
 * Main page for administrator to manage AI, roles, and view system overview
 */
import { Navigate } from "react-router-dom";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Shield, Bot, BarChart3, Lightbulb } from "lucide-react";
import { AIManagementTab } from "@/components/admin/AIManagementTab";
import { RolePermissionsTab } from "@/components/admin/RolePermissionsTab";
import { OverviewTab } from "@/components/admin/OverviewTab";
import { IdeasManagementTab } from "@/components/admin/IdeasManagementTab";
import { useAuth } from "@/contexts/AuthContext";

export default function AdminPanel() {
  const { hasPermission, loading } = useAuth();

  // Check permission
  if (!loading && !hasPermission("admin.access")) {
    return <Navigate to="/unauthorized" replace />;
  }

  return (
    <div className="container mx-auto py-6 space-y-6 animate-fade-in">
      <div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tight">Bảng điều khiển Quản trị</h1>
        <p className="text-muted-foreground">
          Quản lý hệ thống, AI, quyền truy cập và xem tổng quan hệ thống
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Quản lý Hệ thống</CardTitle>
          <CardDescription>
            Các công cụ quản trị để quản lý AI, phân quyền và giám sát hệ thống
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="overview" className="w-full">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="overview" className="flex items-center gap-2">
                <BarChart3 className="h-4 w-4" />
                Tổng quan
              </TabsTrigger>
              <TabsTrigger value="ai" className="flex items-center gap-2">
                <Bot className="h-4 w-4" />
                Quản lý AI
              </TabsTrigger>
              <TabsTrigger value="ideas" className="flex items-center gap-2">
                <Lightbulb className="h-4 w-4" />
                Ý tưởng
              </TabsTrigger>
              <TabsTrigger value="roles" className="flex items-center gap-2">
                <Shield className="h-4 w-4" />
                Phân quyền
              </TabsTrigger>
            </TabsList>

            <TabsContent value="overview" className="mt-6">
              <OverviewTab />
            </TabsContent>

            <TabsContent value="ai" className="mt-6">
              <AIManagementTab />
            </TabsContent>

            <TabsContent value="ideas" className="mt-6">
              <IdeasManagementTab />
            </TabsContent>

            <TabsContent value="roles" className="mt-6">
              <RolePermissionsTab />
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  );
}
