encoach_frontend_v4/src/pages/admin/AdminLmsDashboard.tsx

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Users, BookOpen, GraduationCap, Layers, Ticket, DollarSign, Plus, BarChart3, FolderOpen } from "lucide-react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useCourses, useBatches, useStudents, useTeachers } from "@/hooks/queries";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api-client";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import AiInsightsPanel from "@/components/ai/AiInsightsPanel";
import AiTipBanner from "@/components/ai/AiTipBanner";

interface DashboardStats {
  total_students?: number;
  total_teachers?: number;
  total_courses?: number;
  active_courses?: number;
  total_batches?: number;
  active_batches?: number;
  total_entities?: number;
  total_departments?: number;
  total_classrooms?: number;
  total_exams?: number;
  total_assignments?: number;
  total_tickets?: number;
  open_tickets?: number;
  total_subjects?: number;
  total_resources?: number;
  total_revenue?: number;
  total_payments?: number;
  total_exam_sessions?: number;
}

export default function AdminLmsDashboard() {
  const { t } = useTranslation();
  const { data: coursesData, isLoading: lc } = useCourses();
  const { data: studentsData, isLoading: ls } = useStudents({ size: 500 });
  const { data: teachersData, isLoading: lt } = useTeachers({ size: 500 });
  const { data: batchesData, isLoading: lb } = useBatches();

  const { data: dbStats } = useQuery<DashboardStats>({
    queryKey: ["dashboard", "stats"],
    queryFn: async (): Promise<DashboardStats> => {
      const res = await api.get<{ data: DashboardStats } | DashboardStats>("/stats");
      const wrapped = res as { data?: DashboardStats };
      return wrapped.data ?? (res as DashboardStats);
    },
    staleTime: 30_000,
  });

  const courses = coursesData?.items ?? [];
  const students = studentsData?.items ?? [];
  const teachers = teachersData?.items ?? [];
  const batches = batchesData?.items ?? [];

  if (lc || ls || lt || lb) return <div className="flex items-center justify-center min-h-[400px]"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" /></div>;

  const revenue = dbStats?.total_revenue ?? 0;
  const openTickets = dbStats?.open_tickets ?? 0;

  const statCards = [
    { label: t("adminDash.totalStudents"), value: String(students.length), icon: Users, color: "text-primary" },
    { label: t("adminDash.activeCourses"), value: `${courses.filter(c => c.status === "active").length} / ${courses.length}`, icon: BookOpen, color: "text-info" },
    { label: t("adminDash.teachers"), value: String(teachers.length), icon: GraduationCap, color: "text-success" },
    { label: t("adminDash.activeBatches"), value: `${batches.filter(b => b.status === "active").length} / ${batches.length}`, icon: Layers, color: "text-warning" },
    { label: t("adminDash.openTickets"), value: String(openTickets), icon: Ticket, color: "text-destructive" },
    { label: t("adminDash.revenue"), value: `$${revenue.toLocaleString()}`, icon: DollarSign, color: "text-success" },
  ];

  const courseChartData = courses.map(c => {
    const label = c.title || "";
    const short = label.length > 14 ? label.substring(0, 14) + "…" : label;
    return { course: short, capacity: c.max_capacity ?? 0, enrolled: c.enrolled ?? 0 };
  });

  const batchChartData = batches.map(b => {
    const label = b.name || "";
    const short = label.length > 12 ? label.substring(0, 12) + "…" : label;
    return { batch: short, capacity: b.capacity ?? 0 };
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">{t("adminDash.title")}</h1>
          <p className="text-muted-foreground">{t("adminDash.subtitle")}</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" asChild>
            <Link to="/admin/students"><Plus className="me-1 h-3 w-3" />{t("adminDash.addStudent")}</Link>
          </Button>
          <Button asChild>
            <Link to="/admin/courses"><Plus className="me-1 h-3 w-3" />{t("adminDash.newCourse")}</Link>
          </Button>
        </div>
      </div>

      <AiTipBanner context="admin-lms-dashboard" variant="insight" />
      <AiInsightsPanel />

      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
        {statCards.map(s => (
          <Card key={s.label}>
            <CardContent className="pt-4 pb-4">
              <s.icon className={`h-5 w-5 ${s.color} mb-1`} />
              <p className="text-lg font-bold"><bdi>{s.value}</bdi></p>
              <p className="text-xs text-muted-foreground">{s.label}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
        {[
          { label: t("adminDash.departments"), value: dbStats?.total_departments ?? 0, icon: FolderOpen },
          { label: t("adminDash.classrooms"), value: dbStats?.total_classrooms ?? 0, icon: BarChart3 },
          { label: t("adminDash.subjects"), value: dbStats?.total_subjects ?? 0, icon: BookOpen },
          { label: t("adminDash.resources"), value: dbStats?.total_resources ?? 0, icon: Layers },
        ].map(s => (
          <Card key={s.label}>
            <CardContent className="pt-3 pb-3 flex items-center gap-3">
              <s.icon className="h-4 w-4 text-muted-foreground shrink-0" />
              <div className="min-w-0">
                <p className="text-sm font-semibold"><bdi>{s.value}</bdi></p>
                <p className="text-xs text-muted-foreground">{s.label}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader><CardTitle className="text-lg">{t("adminDash.coursesOverview")}</CardTitle></CardHeader>
          <CardContent>
            {courseChartData.length > 0 ? (
              <ResponsiveContainer width="100%" height={220}>
                <BarChart data={courseChartData}>
                  <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                  <XAxis dataKey="course" className="fill-muted-foreground" tick={{ fontSize: 10 }} />
                  <YAxis className="fill-muted-foreground" tick={{ fontSize: 12 }} />
                  <Tooltip />
                  <Bar dataKey="capacity" name={t("adminDash.chartCapacity")} fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="enrolled" name={t("adminDash.chartEnrolled")} fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            ) : (
              <p className="text-sm text-muted-foreground py-8 text-center">{t("adminDash.noCourseData")}</p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader><CardTitle className="text-lg">{t("adminDash.batchCapacity")}</CardTitle></CardHeader>
          <CardContent>
            {batchChartData.length > 0 ? (
              <ResponsiveContainer width="100%" height={220}>
                <BarChart data={batchChartData}>
                  <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                  <XAxis dataKey="batch" className="fill-muted-foreground" tick={{ fontSize: 10 }} />
                  <YAxis className="fill-muted-foreground" tick={{ fontSize: 12 }} />
                  <Tooltip />
                  <Bar dataKey="capacity" name={t("adminDash.chartCapacity")} fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            ) : (
              <p className="text-sm text-muted-foreground py-8 text-center">{t("adminDash.noBatchData")}</p>
            )}
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-lg">{t("adminDash.quickSummary")}</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>{t("adminDash.colModule")}</TableHead>
                <TableHead className="text-end">{t("adminDash.colCount")}</TableHead>
                <TableHead>{t("adminDash.colStatus")}</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell className="font-medium">{t("adminDash.exams")}</TableCell>
                <TableCell className="text-end"><bdi>{dbStats?.total_exams ?? 0}</bdi></TableCell>
                <TableCell className="text-muted-foreground">
                  {t("adminDash.examSessionsCount", { n: dbStats?.total_exam_sessions ?? 0 })}
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell className="font-medium">{t("adminDash.assignments")}</TableCell>
                <TableCell className="text-end"><bdi>{dbStats?.total_assignments ?? 0}</bdi></TableCell>
                <TableCell className="text-muted-foreground">{t("adminDash.acrossCourses")}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell className="font-medium">{t("adminDash.supportTickets")}</TableCell>
                <TableCell className="text-end"><bdi>{dbStats?.total_tickets ?? 0}</bdi></TableCell>
                <TableCell className="text-muted-foreground">
                  {t("adminDash.ticketsOpenCount", { n: openTickets })}
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell className="font-medium">{t("adminDash.payments")}</TableCell>
                <TableCell className="text-end"><bdi>{dbStats?.total_payments ?? 0}</bdi></TableCell>
                <TableCell className="text-muted-foreground">
                  {t("adminDash.revenueTotal", { amount: `$${revenue.toLocaleString()}` })}
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}