import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Search, Plus, Trash2, Users, UserPlus, UserMinus, Pencil } from "lucide-react";
import { useBatches, useCourses, useStudents } from "@/hooks/queries";
import { lmsService } from "@/services/lms.service";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

export default function ClassroomsPage() {
  const [search, setSearch] = useState("");
  const [createOpen, setCreateOpen] = useState(false);
  const [form, setForm] = useState({ name: "", course_id: "", start_date: "", end_date: "", max_students: "" });
  const [editOpen, setEditOpen] = useState(false);
  const [editBatch, setEditBatch] = useState<{ id: number; name: string; course_id: string; start_date: string; end_date: string } | null>(null);
  const [studentsOpen, setStudentsOpen] = useState(false);
  const [studentsBatchId, setStudentsBatchId] = useState<number | null>(null);
  const [addStudentsOpen, setAddStudentsOpen] = useState(false);
  const [selectedAddIds, setSelectedAddIds] = useState<number[]>([]);
  const { toast } = useToast();
  const qc = useQueryClient();

  const batchesQ = useBatches({ size: 200 });
  const coursesQ = useCourses({ size: 200 });
  const studentsQ = useStudents({ size: 200 });
  const batches = batchesQ.data?.items ?? [];
  const courses = coursesQ.data?.items ?? [];
  const allStudents = studentsQ.data?.items ?? [];

  const createMut = useMutation({
    mutationFn: (data: Parameters<typeof lmsService.createBatch>[0]) => lmsService.createBatch(data),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["lms", "batches"] });
      setCreateOpen(false);
      setForm({ name: "", course_id: "", start_date: "", end_date: "", max_students: "" });
      toast({ title: "Classroom created" });
    },
    onError: (err: Error) => toast({ title: "Error", description: err.message, variant: "destructive" }),
  });

  const updateMut = useMutation({
    mutationFn: ({ id, data }: { id: number; data: Record<string, unknown> }) => lmsService.updateBatch(id, data as never),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["lms", "batches"] });
      setEditOpen(false);
      toast({ title: "Classroom updated" });
    },
    onError: (err: Error) => toast({ title: "Error", description: err.message, variant: "destructive" }),
  });

  const deleteMut = useMutation({
    mutationFn: (id: number) => lmsService.deleteBatch(id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["lms", "batches"] });
      toast({ title: "Deleted" });
    },
    onError: (err: Error) => toast({ title: "Error", description: err.message, variant: "destructive" }),
  });

  const addStudentsMut = useMutation({
    mutationFn: ({ batchId, studentIds }: { batchId: number; studentIds: number[] }) =>
      lmsService.addStudentsToBatch(batchId, studentIds),
    onSuccess: (res) => {
      qc.invalidateQueries({ queryKey: ["lms", "batches"] });
      setAddStudentsOpen(false);
      setSelectedAddIds([]);
      toast({ title: `Added ${res.total} student(s)` });
    },
    onError: (err: Error) => toast({ title: "Error", description: err.message, variant: "destructive" }),
  });

  const removeStudentMut = useMutation({
    mutationFn: ({ batchId, studentIds }: { batchId: number; studentIds: number[] }) =>
      lmsService.removeStudentsFromBatch(batchId, studentIds),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["lms", "batches"] });
      toast({ title: "Student removed from classroom" });
    },
    onError: (err: Error) => toast({ title: "Error", description: err.message, variant: "destructive" }),
  });

  const q = search.toLowerCase();
  const filtered = batches.filter(
    (b) => b.name.toLowerCase().includes(q) || b.course_name?.toLowerCase().includes(q),
  );
  const loading = batchesQ.isLoading;

  const currentBatch = batches.find((b) => b.id === studentsBatchId);
  const batchStudentIds = new Set(currentBatch?.student_ids ?? []);
  const availableStudents = allStudents.filter((s) => !batchStudentIds.has(s.id));

  function openStudents(batchId: number) {
    setStudentsBatchId(batchId);
    setStudentsOpen(true);
  }

  function openEdit(b: typeof batches[0]) {
    setEditBatch({
      id: b.id,
      name: b.name,
      course_id: String(b.course_id || ""),
      start_date: b.start_date,
      end_date: b.end_date,
    });
    setEditOpen(true);
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Classrooms</h1>
          <p className="text-muted-foreground">Create and manage classrooms with students.</p>
        </div>
        <Button size="sm" onClick={() => setCreateOpen(true)}>
          <Plus className="h-4 w-4 mr-1" /> Create Classroom
        </Button>
      </div>

      <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 classrooms..." className="pl-9" value={search} onChange={(e) => setSearch(e.target.value)} />
        </div>
        <Badge variant="secondary">{batches.length} total</Badge>
      </div>

      {loading ? (
        <div className="flex items-center justify-center min-h-[300px]">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
        </div>
      ) : (
        <Card className="border-0 shadow-sm">
          <CardContent className="p-0">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Course</TableHead>
                  <TableHead>Students</TableHead>
                  <TableHead>Dates</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="w-[140px]" />
                </TableRow>
              </TableHeader>
              <TableBody>
                {filtered.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
                      No classrooms found.
                    </TableCell>
                  </TableRow>
                )}
                {filtered.map((b) => (
                  <TableRow key={b.id}>
                    <TableCell className="font-medium">{b.name}</TableCell>
                    <TableCell>{b.course_name || "—"}</TableCell>
                    <TableCell>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="gap-1.5 h-7 px-2"
                        onClick={() => openStudents(b.id)}
                      >
                        <Users className="h-3.5 w-3.5" />
                        {b.student_count} students
                      </Button>
                    </TableCell>
                    <TableCell className="text-sm">
                      {b.start_date && b.end_date
                        ? `${b.start_date} — ${b.end_date}`
                        : "—"}
                    </TableCell>
                    <TableCell>
                      <Badge
                        variant={b.status === "active" ? "default" : "secondary"}
                        className="capitalize"
                      >
                        {b.status}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-1">
                        <Button variant="ghost" size="icon" className="h-8 w-8" title="Manage students" onClick={() => openStudents(b.id)}>
                          <UserPlus className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8" title="Edit" onClick={() => openEdit(b)}>
                          <Pencil className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-destructive"
                          onClick={() => {
                            if (window.confirm(`Delete "${b.name}"?`)) deleteMut.mutate(b.id);
                          }}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}

      {/* Create Dialog */}
      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
        <DialogContent>
          <DialogHeader><DialogTitle>Create Classroom</DialogTitle></DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>Name</Label>
              <Input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="e.g. IELTS Prep Group A" />
            </div>
            <div className="space-y-2">
              <Label>Course</Label>
              <Select value={form.course_id} onValueChange={(v) => setForm((f) => ({ ...f, course_id: v }))}>
                <SelectTrigger><SelectValue placeholder="Select course" /></SelectTrigger>
                <SelectContent>
                  {courses.map((c) => (
                    <SelectItem key={c.id} value={String(c.id)}>{c.title || c.code}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-2">
                <Label>Start Date</Label>
                <Input type="date" value={form.start_date} onChange={(e) => setForm((f) => ({ ...f, start_date: e.target.value }))} />
              </div>
              <div className="space-y-2">
                <Label>End Date</Label>
                <Input type="date" value={form.end_date} onChange={(e) => setForm((f) => ({ ...f, end_date: e.target.value }))} />
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateOpen(false)}>Cancel</Button>
            <Button
              disabled={createMut.isPending || !form.name}
              onClick={() =>
                createMut.mutate({
                  name: form.name,
                  course_id: Number(form.course_id) || undefined,
                  start_date: form.start_date || undefined,
                  end_date: form.end_date || undefined,
                } as never)
              }
            >
              {createMut.isPending ? "Creating..." : "Create"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Edit Dialog */}
      <Dialog open={editOpen} onOpenChange={setEditOpen}>
        <DialogContent>
          <DialogHeader><DialogTitle>Edit Classroom</DialogTitle></DialogHeader>
          {editBatch && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>Name</Label>
                <Input
                  value={editBatch.name}
                  onChange={(e) => setEditBatch((prev) => prev ? { ...prev, name: e.target.value } : prev)}
                />
              </div>
              <div className="space-y-2">
                <Label>Course</Label>
                <Select
                  value={editBatch.course_id}
                  onValueChange={(v) => setEditBatch((prev) => prev ? { ...prev, course_id: v } : prev)}
                >
                  <SelectTrigger><SelectValue placeholder="Select course" /></SelectTrigger>
                  <SelectContent>
                    {courses.map((c) => (
                      <SelectItem key={c.id} value={String(c.id)}>{c.title || c.code}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-2">
                  <Label>Start Date</Label>
                  <Input
                    type="date"
                    value={editBatch.start_date}
                    onChange={(e) => setEditBatch((prev) => prev ? { ...prev, start_date: e.target.value } : prev)}
                  />
                </div>
                <div className="space-y-2">
                  <Label>End Date</Label>
                  <Input
                    type="date"
                    value={editBatch.end_date}
                    onChange={(e) => setEditBatch((prev) => prev ? { ...prev, end_date: e.target.value } : prev)}
                  />
                </div>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditOpen(false)}>Cancel</Button>
            <Button
              disabled={updateMut.isPending || !editBatch?.name}
              onClick={() => {
                if (!editBatch) return;
                updateMut.mutate({
                  id: editBatch.id,
                  data: {
                    name: editBatch.name,
                    course_id: Number(editBatch.course_id) || undefined,
                    start_date: editBatch.start_date || undefined,
                    end_date: editBatch.end_date || undefined,
                  },
                });
              }}
            >
              {updateMut.isPending ? "Saving..." : "Save"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Students Management Dialog */}
      <Dialog open={studentsOpen} onOpenChange={setStudentsOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>
              Classroom Students — {currentBatch?.name}
            </DialogTitle>
            <DialogDescription>
              {currentBatch?.course_name && `Course: ${currentBatch.course_name}`}
              {currentBatch ? ` · ${currentBatch.student_count} student(s)` : ""}
            </DialogDescription>
          </DialogHeader>

          <div className="max-h-[320px] overflow-y-auto space-y-1">
            {currentBatch?.student_ids?.length === 0 ? (
              <p className="text-sm text-muted-foreground text-center py-6">
                No students in this classroom yet.
              </p>
            ) : (
              allStudents
                .filter((s) => batchStudentIds.has(s.id))
                .map((s) => (
                  <div key={s.id} className="flex items-center justify-between p-2 rounded hover:bg-muted/50">
                    <div>
                      <p className="text-sm font-medium">{s.name}</p>
                      <p className="text-xs text-muted-foreground">{s.email}</p>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-7 text-destructive"
                      onClick={() => {
                        if (studentsBatchId && window.confirm(`Remove ${s.name} from this classroom?`))
                          removeStudentMut.mutate({ batchId: studentsBatchId, studentIds: [s.id] });
                      }}
                    >
                      <UserMinus className="h-3.5 w-3.5 mr-1" /> Remove
                    </Button>
                  </div>
                ))
            )}
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setStudentsOpen(false)}>Close</Button>
            <Button
              onClick={() => {
                setSelectedAddIds([]);
                setAddStudentsOpen(true);
              }}
            >
              <UserPlus className="h-4 w-4 mr-1" /> Add Students
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Add Students to Batch Dialog */}
      <Dialog open={addStudentsOpen} onOpenChange={setAddStudentsOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>Add Students to {currentBatch?.name}</DialogTitle>
            <DialogDescription>
              Select students to add to this classroom.
            </DialogDescription>
          </DialogHeader>

          <div className="max-h-[320px] overflow-y-auto space-y-1">
            {availableStudents.length === 0 ? (
              <p className="text-sm text-muted-foreground text-center py-4">
                All students are already in this classroom.
              </p>
            ) : (
              availableStudents.map((s) => (
                <label key={s.id} className="flex items-center gap-3 p-2 rounded hover:bg-muted/50 cursor-pointer">
                  <Checkbox
                    checked={selectedAddIds.includes(s.id)}
                    onCheckedChange={() =>
                      setSelectedAddIds((prev) =>
                        prev.includes(s.id) ? prev.filter((x) => x !== s.id) : [...prev, s.id],
                      )
                    }
                  />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate">{s.name}</p>
                    <p className="text-xs text-muted-foreground">{s.email}</p>
                  </div>
                </label>
              ))
            )}
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setAddStudentsOpen(false)}>Cancel</Button>
            <Button
              disabled={addStudentsMut.isPending || selectedAddIds.length === 0}
              onClick={() => {
                if (studentsBatchId)
                  addStudentsMut.mutate({ batchId: studentsBatchId, studentIds: selectedAddIds });
              }}
            >
              {addStudentsMut.isPending
                ? "Adding..."
                : `Add ${selectedAddIds.length} Student(s)`}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}