full_encoach_platform/frontend/src/pages/ExamStructuresPage.tsx

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Search, Plus, Layers, Trash2, Loader2 } from "lucide-react";
import AiTipBanner from "@/components/ai/AiTipBanner";
import { examsService } from "@/services/exams.service";
import { useToast } from "@/hooks/use-toast";
import type { ExamStructure } from "@/types";

const MODULE_OPTIONS = ["Reading", "Listening", "Writing", "Speaking"];

export default function ExamStructuresPage() {
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const [search, setSearch] = useState("");
  const [entityFilter, setEntityFilter] = useState("all");
  const [createOpen, setCreateOpen] = useState(false);
  const [newName, setNewName] = useState("");
  const [newIndustry, setNewIndustry] = useState("");
  const [newModules, setNewModules] = useState<string[]>([]);

  const { data, isLoading, error } = useQuery({
    queryKey: ["exam-structures", entityFilter],
    queryFn: () => examsService.listStructures(entityFilter !== "all" ? { entity_id: Number(entityFilter) } : {}),
  });

  const structures: ExamStructure[] = data?.items ?? [];

  const createMut = useMutation({
    mutationFn: (structureData: Partial<ExamStructure>) => examsService.createStructure(structureData),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["exam-structures"] });
      setCreateOpen(false);
      setNewName("");
      setNewIndustry("");
      setNewModules([]);
      toast({ title: "Structure created" });
    },
    onError: (err: Error) => toast({ variant: "destructive", title: "Failed", description: err.message }),
  });

  const deleteMut = useMutation({
    mutationFn: (id: number) => examsService.deleteStructure(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["exam-structures"] });
      toast({ title: "Structure deleted" });
    },
    onError: (err: Error) => toast({ variant: "destructive", title: "Failed", description: err.message }),
  });

  const filtered = structures.filter((s) => {
    if (search) {
      const q = search.toLowerCase();
      return s.name?.toLowerCase().includes(q) || (s as Record<string, unknown>).industry?.toString().toLowerCase().includes(q);
    }
    return true;
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Exam Structures</h1>
          <p className="text-muted-foreground">Define exam structure templates by entity and industry.</p>
        </div>
        <div className="flex gap-2">
          <Dialog open={createOpen} onOpenChange={setCreateOpen}>
            <DialogTrigger asChild>
              <Button size="sm"><Plus className="h-4 w-4 mr-1" /> Create Structure</Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader><DialogTitle>Create Exam Structure</DialogTitle></DialogHeader>
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label>Structure Name</Label>
                  <Input placeholder="e.g. Corporate Writing Test" value={newName} onChange={(e) => setNewName(e.target.value)} />
                </div>
                <div className="space-y-2">
                  <Label>Industry</Label>
                  <Select value={newIndustry} onValueChange={setNewIndustry}>
                    <SelectTrigger><SelectValue placeholder="Select Industry" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="General">General</SelectItem>
                      <SelectItem value="Technology">Technology</SelectItem>
                      <SelectItem value="Healthcare">Healthcare</SelectItem>
                      <SelectItem value="Hospitality">Hospitality</SelectItem>
                      <SelectItem value="Education">Education</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Modules</Label>
                  <div className="flex flex-wrap gap-3">
                    {MODULE_OPTIONS.map((m) => (
                      <div key={m} className="flex items-center gap-2">
                        <Checkbox id={`new-mod-${m}`} checked={newModules.includes(m.toLowerCase())}
                          onCheckedChange={(checked) => {
                            setNewModules((prev) => checked ? [...prev, m.toLowerCase()] : prev.filter((x) => x !== m.toLowerCase()));
                          }} />
                        <Label htmlFor={`new-mod-${m}`} className="text-sm">{m}</Label>
                      </div>
                    ))}
                  </div>
                </div>
                <Button className="w-full" disabled={!newName || createMut.isPending}
                  onClick={() => createMut.mutate({ name: newName, industry: newIndustry, modules: newModules } as unknown as Partial<ExamStructure>)}>
                  {createMut.isPending ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : null}
                  Create
                </Button>
              </div>
            </DialogContent>
          </Dialog>
          <Button size="sm" variant="destructive" disabled><Trash2 className="h-4 w-4 mr-1" /> Delete</Button>
        </div>
      </div>

      <AiTipBanner context="exam-structures" variant="insight" />

      <div className="flex gap-3 items-center">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input placeholder="Search structures..." className="pl-9" value={search} onChange={(e) => setSearch(e.target.value)} />
        </div>
        <Select value={entityFilter} onValueChange={setEntityFilter}>
          <SelectTrigger className="w-[140px]"><SelectValue placeholder="Entity" /></SelectTrigger>
          <SelectContent><SelectItem value="all">All Entities</SelectItem></SelectContent>
        </Select>
      </div>

      {isLoading && (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
        </div>
      )}

      {error && (
        <Card className="border-destructive">
          <CardContent className="p-4 text-sm text-destructive">Failed to load structures. The backend endpoint may not be available yet.</CardContent>
        </Card>
      )}

      {!isLoading && !error && filtered.length === 0 && (
        <Card className="border-dashed">
          <CardContent className="p-8 text-center text-muted-foreground">
            No exam structures found. Create one to get started.
          </CardContent>
        </Card>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {filtered.map((s) => (
          <Card key={s.id} className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base font-semibold flex items-center gap-2">
                  <Layers className="h-4 w-4 text-primary" />{s.name}
                </CardTitle>
                <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive"
                  onClick={() => deleteMut.mutate(s.id)} disabled={deleteMut.isPending}>
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-4 text-sm text-muted-foreground mb-3">
                {(s as Record<string, unknown>).entity_name && <span>Entity: <span className="text-foreground font-medium">{String((s as Record<string, unknown>).entity_name)}</span></span>}
                {(s as Record<string, unknown>).industry && <span>Industry: <span className="text-foreground font-medium">{String((s as Record<string, unknown>).industry)}</span></span>}
              </div>
              <div className="flex gap-1.5 flex-wrap">
                {(Array.isArray((s as Record<string, unknown>).modules) ? (s as Record<string, unknown>).modules as string[] : []).map((m) => (
                  <Badge key={m} variant="outline" className="capitalize">{m}</Badge>
                ))}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}