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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { toast } from "sonner";
import { Plus, Trash2 } from "lucide-react";
import AdminLayout from "@/layouts/AdminLayout";

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

const CourseAssignments = () => {
  const queryClient = useQueryClient();
  const initialCourseId = typeof window !== 'undefined'
    ? new URLSearchParams(window.location.search).get('course') ?? ""
    : "";
  const [selectedCourseId, setSelectedCourseId] = useState(initialCourseId);
  const [selectedTrainerId, setSelectedTrainerId] = useState("");
  const [selectedVenueId, setSelectedVenueId] = useState("");

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

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

  const { data: venues } = useQuery({
    queryKey: ["venues"],
    queryFn: async () => {
      const res = await fetch("/api/admin/venues?status=active");
      if (!res.ok) return [];
      return res.json();
    },
  });

  const { data: courseTrainers } = useQuery({
    queryKey: ["course_trainers"],
    queryFn: async () => {
      const res = await fetch("/api/admin/course-trainers?with=courses,trainers,venues");
      if (!res.ok) return [];
      return res.json();
    },
  });

  const assignMutation = useMutation({
    mutationFn: async ({ course_id, trainer_id, venue_id }: { course_id: string; trainer_id: string; venue_id: string }) => {
      const res = await fetch('/api/admin/course-trainers', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
        body: JSON.stringify({ course_id, trainer_id, venue_id }),
      });
      if (!res.ok) throw new Error('Failed to assign trainer');
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["course_trainers"] });
      toast.success("Trainer assigned to course at venue");
      setSelectedTrainerId("");
      setSelectedVenueId("");
    },
    onError: (e: Error) => toast.error(e.message),
  });

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

  const filteredAssignments = selectedCourseId && selectedCourseId !== "all"
    ? courseTrainers?.filter((ct: any) => ct.course_id === selectedCourseId)
    : courseTrainers;

  return (
    <div>
      <h1 className="text-2xl font-bold text-foreground mb-6">Course ↔ Trainer ↔ Venue Assignments</h1>

      <div className="grid sm:grid-cols-2 gap-4 mb-6">
        <div>
          <Label className="mb-2 block">Filter by Course</Label>
          <Select value={selectedCourseId} onValueChange={setSelectedCourseId}>
            <SelectTrigger><SelectValue placeholder="All courses" /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All courses</SelectItem>
              {courses?.map((c: any) => (
                <SelectItem key={c.id} value={c.id}>{c.title}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {selectedCourseId && selectedCourseId !== "all" && (
        <div className="bg-card border border-border rounded-xl p-4 mb-6">
          <h3 className="font-semibold text-foreground mb-3">Assign Trainer + Venue</h3>
          <div className="grid sm:grid-cols-3 gap-3 items-end">
            <div>
              <Label className="mb-1.5 block text-sm">Trainer</Label>
              <Select value={selectedTrainerId} onValueChange={setSelectedTrainerId}>
                <SelectTrigger><SelectValue placeholder="Select trainer" /></SelectTrigger>
                <SelectContent>
                  {trainers?.map((t: any) => (
                    <SelectItem key={t.id} value={t.id}>{t.first_name} {t.last_name}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="mb-1.5 block text-sm">Venue</Label>
              <Select value={selectedVenueId} onValueChange={setSelectedVenueId}>
                <SelectTrigger><SelectValue placeholder="Select venue" /></SelectTrigger>
                <SelectContent>
                  {venues?.map((v: any) => (
                    <SelectItem key={v.id} value={v.id}>{v.name}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <Button
              variant="hero"
              disabled={!selectedTrainerId || !selectedVenueId}
              onClick={() => assignMutation.mutate({
                course_id: selectedCourseId,
                trainer_id: selectedTrainerId,
                venue_id: selectedVenueId,
              })}
            >
              <Plus className="h-4 w-4 mr-1" /> Assign
            </Button>
          </div>
        </div>
      )}

      <div className="bg-card border border-border rounded-xl overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Course</TableHead>
              <TableHead>Trainer</TableHead>
              <TableHead>Venue</TableHead>
              <TableHead className="w-[80px]">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredAssignments?.map((ct: any) => (
              <TableRow key={ct.id}>
                <TableCell className="font-medium">{ct.courses?.title}</TableCell>
                <TableCell>{ct.trainers?.first_name} {ct.trainers?.last_name}</TableCell>
                <TableCell>{ct.venues?.name || <span className="text-muted-foreground italic">No venue</span>}</TableCell>
                <TableCell>
                  <Button variant="ghost" size="sm" onClick={() => removeMutation.mutate(ct.id)}>
                    <Trash2 className="h-3 w-3 text-destructive" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
            {(!filteredAssignments || filteredAssignments.length === 0) && (
              <TableRow>
                <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
                  {selectedCourseId && selectedCourseId !== "all"
                    ? "No trainers assigned to this course yet."
                    : "No course-trainer assignments yet. Select a course and assign trainers."}
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
};

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

export default CourseAssignments;