encoach_frontend_new_v2/src/pages/teacher/TeacherAssignments.tsx

import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useCourseAssignments } from "@/hooks/queries";
import { ClipboardList } from "lucide-react";
import AiCreationAssistant from "@/components/ai/AiCreationAssistant";
import AiGeneratorModal from "@/components/ai/AiGeneratorModal";
import AiTipBanner from "@/components/ai/AiTipBanner";
import type { CourseAssignment } from "@/types";

export default function TeacherAssignments() {
  const { data: assignmentsData, isLoading } = useCourseAssignments();
  const assignments: CourseAssignment[] = assignmentsData?.items ?? [];
  if (isLoading) 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 stateVariant = (s: string) => s === "finish" ? "default" : s === "cancel" ? "destructive" : "secondary";
  const stateLabel = (s: string) => s === "publish" ? "Active" : s === "finish" ? "Completed" : s === "cancel" ? "Cancelled" : "Draft";

  const stateFilter = (state: string) => assignments.filter(a => state === "all" ? true : a.state === state);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Assignments</h1>
          <p className="text-muted-foreground">Manage and grade student assignments.</p>
        </div>
        <div className="flex gap-2">
          <AiCreationAssistant type="assignment" />
          <AiGeneratorModal />
        </div>
      </div>

      <AiTipBanner context="teacher-assignments" variant="insight" />

      <Tabs defaultValue="all">
        <TabsList>
          <TabsTrigger value="all">All ({assignments.length})</TabsTrigger>
          <TabsTrigger value="publish">Active ({stateFilter("publish").length})</TabsTrigger>
          <TabsTrigger value="finish">Completed ({stateFilter("finish").length})</TabsTrigger>
          <TabsTrigger value="draft">Drafts ({stateFilter("draft").length})</TabsTrigger>
        </TabsList>

        {["all", "publish", "finish", "draft"].map(tab => (
          <TabsContent key={tab} value={tab} className="mt-4 space-y-3">
            {stateFilter(tab).length === 0 ? (
              <div className="text-center py-8">
                <ClipboardList className="h-10 w-10 text-muted-foreground mx-auto mb-3" />
                <p className="text-muted-foreground text-sm">No assignments found.</p>
              </div>
            ) : stateFilter(tab).map(a => (
              <Card key={a.id} className="hover:bg-muted/30 transition-colors">
                <CardContent className="pt-4 flex items-center justify-between">
                  <div className="min-w-0">
                    <p className="font-medium text-sm">{a.name}</p>
                    <p className="text-xs text-muted-foreground">
                      {a.course_name} · {a.batch_name} · Due: {a.submission_date}
                    </p>
                    <p className="text-xs text-muted-foreground mt-0.5">
                      {a.submission_count}/{a.allocation_count} submissions · Marks: {a.marks}
                    </p>
                  </div>
                  <div className="flex items-center gap-2 shrink-0">
                    <Badge variant="outline" className="text-xs">{a.assignment_type_name}</Badge>
                    <Badge variant={stateVariant(a.state)}>{stateLabel(a.state)}</Badge>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>
        ))}
      </Tabs>
    </div>
  );
}