import { useState, ReactNode } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { Plus, Trash2, ArrowRight, Link2 } from "lucide-react";
import AdminLayout from "@/layouts/AdminLayout";

const csrfToken = () => (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';

const CoursePrerequisites = () => {
  const queryClient = useQueryClient();
  const [courseId, setCourseId] = useState("");
  const [prereqId, setPrereqId] = useState("");
  const [isMandatory, setIsMandatory] = useState(true);

  const { data: courses } = useQuery({
    queryKey: ["courses"],
    queryFn: async () => {
      const res = await fetch("/api/admin/courses?fields=id,title,slug,category");
      if (!res.ok) return [];
      return res.json();
    },
  });

  const { data: prerequisites, isLoading } = useQuery({
    queryKey: ["course_prerequisites"],
    queryFn: async () => {
      const res = await fetch("/api/admin/course-prerequisites");
      if (!res.ok) return [];
      return res.json();
    },
  });

  const addMutation = useMutation({
    mutationFn: async () => {
      if (courseId === prereqId) throw new Error("A course cannot be its own prerequisite");
      const res = await fetch('/api/admin/course-prerequisites', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
        body: JSON.stringify({
          course_id: courseId,
          prerequisite_course_id: prereqId,
          is_mandatory: isMandatory,
        }),
      });
      if (!res.ok) throw new Error('Failed to add prerequisite');
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["course_prerequisites"] });
      toast.success("Prerequisite added");
      setPrereqId("");
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const removeMutation = useMutation({
    mutationFn: async (id: string) => {
      const res = await fetch(`/api/admin/course-prerequisites/${id}`, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
      });
      if (!res.ok) throw new Error('Failed to remove prerequisite');
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["course_prerequisites"] });
      toast.success("Prerequisite removed");
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const getCourseName = (id: string) => courses?.find((c: any) => c.id === id)?.title || id;

  const filtered = courseId && courseId !== "all"
    ? prerequisites?.filter((p: any) => p.course_id === courseId)
    : prerequisites;

  return (
    <div>
      <div className="flex items-center gap-3 mb-6">
        <Link2 className="h-6 w-6 text-primary" />
        <h1 className="text-2xl font-bold text-foreground">Course Prerequisites</h1>
      </div>

      <p className="text-muted-foreground mb-6">
        Define which courses must be completed before a delegate can book another course.
        Mandatory prerequisites will block booking; recommended ones show as suggestions.
      </p>

      <div className="bg-card border border-border rounded-xl p-4 mb-6">
        <h3 className="font-semibold text-foreground mb-3">Add Prerequisite</h3>
        <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-3 items-end">
          <div>
            <Label className="mb-1.5 block text-sm">Course</Label>
            <Select value={courseId} onValueChange={setCourseId}>
              <SelectTrigger><SelectValue placeholder="Select course" /></SelectTrigger>
              <SelectContent>
                {courses?.map((c: any) => (
                  <SelectItem key={c.id} value={c.id}>{c.title}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="flex items-center justify-center">
            <ArrowRight className="h-5 w-5 text-muted-foreground" />
          </div>
          <div>
            <Label className="mb-1.5 block text-sm">Requires completion of</Label>
            <Select value={prereqId} onValueChange={setPrereqId}>
              <SelectTrigger><SelectValue placeholder="Select prerequisite" /></SelectTrigger>
              <SelectContent>
                {courses?.filter((c: any) => c.id !== courseId).map((c: any) => (
                  <SelectItem key={c.id} value={c.id}>{c.title}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="flex items-center gap-2">
            <Switch checked={isMandatory} onCheckedChange={setIsMandatory} />
            <Label className="text-sm">{isMandatory ? "Mandatory" : "Recommended"}</Label>
          </div>
          <Button
            variant="hero"
            disabled={!courseId || !prereqId}
            onClick={() => addMutation.mutate()}
          >
            <Plus className="h-4 w-4 mr-1" /> Add
          </Button>
        </div>
      </div>

      <div className="bg-card border border-border rounded-xl overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Course</TableHead>
              <TableHead>Requires</TableHead>
              <TableHead>Type</TableHead>
              <TableHead className="w-[80px]">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filtered?.map((p: any) => (
              <TableRow key={p.id}>
                <TableCell className="font-medium">{getCourseName(p.course_id)}</TableCell>
                <TableCell>{getCourseName(p.prerequisite_course_id)}</TableCell>
                <TableCell>
                  <Badge variant={p.is_mandatory ? "destructive" : "outline"}>
                    {p.is_mandatory ? "Mandatory" : "Recommended"}
                  </Badge>
                </TableCell>
                <TableCell>
                  <Button variant="ghost" size="sm" onClick={() => removeMutation.mutate(p.id)}>
                    <Trash2 className="h-3 w-3 text-destructive" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
            {(!filtered || filtered.length === 0) && (
              <TableRow>
                <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
                  No prerequisites defined yet.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
};

CoursePrerequisites.layout = (page: ReactNode) => <AdminLayout>{page}</AdminLayout>;

export default CoursePrerequisites;