"use client"

import { useState } from "react"
import { useFormStatus } from "react-dom"
import { toast } from "sonner"
import { useRouter } from "next/navigation"

import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Button } from "@/shared/components/ui/button"
import { Input } from "@/shared/components/ui/input"
import { Label } from "@/shared/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/components/ui/table"

import { batchCreateGradeRecordsAction } from "../actions"

type Option = { id: string; name: string }
type Student = { id: string; name: string; email: string }

function SubmitButton() {
  const { pending } = useFormStatus()
  return (
    <Button type="submit" disabled={pending}>
      {pending ? "Saving..." : "Save All Grades"}
    </Button>
  )
}

export function BatchGradeEntry({
  classes,
  subjects,
  students,
  defaultClassId,
  defaultSubjectId,
}: {
  classes: Option[]
  subjects: Option[]
  students: Student[]
  defaultClassId?: string
  defaultSubjectId?: string
}) {
  const router = useRouter()
  const [classId, setClassId] = useState(defaultClassId ?? classes[0]?.id ?? "")
  const [subjectId, setSubjectId] = useState(defaultSubjectId ?? subjects[0]?.id ?? "")
  const [type, setType] = useState<"exam" | "quiz" | "homework" | "other">("exam")
  const [semester, setSemester] = useState<"1" | "2">("1")
  const [scores, setScores] = useState<Record<string, string>>({})

  const handleScoreChange = (studentId: string, value: string) => {
    setScores((prev) => ({ ...prev, [studentId]: value }))
  }

  const handleSubmit = async (formData: FormData) => {
    if (!classId || !subjectId) {
      toast.error("Please select class and subject")
      return
    }

    const records = students
      .map((s) => ({
        studentId: s.id,
        score: Number(scores[s.id] ?? 0),
        remark: undefined as string | undefined,
      }))
      .filter((r) => r.score > 0 || scores[r.studentId] !== undefined)

    if (records.length === 0) {
      toast.error("Please enter at least one score")
      return
    }

    formData.set("classId", classId)
    formData.set("subjectId", subjectId)
    formData.set("type", type)
    formData.set("semester", semester)
    formData.set("recordsJson", JSON.stringify(records))

    const result = await batchCreateGradeRecordsAction(null, formData)
    if (result.success) {
      toast.success(result.message)
      router.push("/teacher/grades")
      router.refresh()
    } else {
      toast.error(result.message || "Failed to save")
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Batch Grade Entry</CardTitle>
      </CardHeader>
      <CardContent>
        <form action={handleSubmit} className="space-y-6">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div className="grid gap-2">
              <Label>Class</Label>
              <Select value={classId} onValueChange={setClassId}>
                <SelectTrigger>
                  <SelectValue placeholder="Select a class" />
                </SelectTrigger>
                <SelectContent>
                  {classes.map((c) => (
                    <SelectItem key={c.id} value={c.id}>
                      {c.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-2">
              <Label>Subject</Label>
              <Select value={subjectId} onValueChange={setSubjectId}>
                <SelectTrigger>
                  <SelectValue placeholder="Select a subject" />
                </SelectTrigger>
                <SelectContent>
                  {subjects.map((s) => (
                    <SelectItem key={s.id} value={s.id}>
                      {s.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-2 md:col-span-2">
              <Label htmlFor="title">Exam / Quiz Title</Label>
              <Input id="title" name="title" placeholder="e.g. Mid-term Exam" required />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="fullScore">Full Score</Label>
              <Input id="fullScore" name="fullScore" type="number" step="0.01" min="1" defaultValue="100" />
            </div>

            <div className="grid gap-2">
              <Label>Type</Label>
              <Select value={type} onValueChange={(v) => setType(v as typeof type)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="exam">Exam</SelectItem>
                  <SelectItem value="quiz">Quiz</SelectItem>
                  <SelectItem value="homework">Homework</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-2">
              <Label>Semester</Label>
              <Select value={semester} onValueChange={(v) => setSemester(v as "1" | "2")}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">Semester 1</SelectItem>
                  <SelectItem value="2">Semester 2</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          {students.length === 0 ? (
            <p className="text-sm text-muted-foreground">No students in this class.</p>
          ) : (
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Student</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead className="w-32">Score</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {students.map((s) => (
                    <TableRow key={s.id}>
                      <TableCell className="font-medium">{s.name}</TableCell>
                      <TableCell className="text-muted-foreground">{s.email}</TableCell>
                      <TableCell>
                        <Input
                          type="number"
                          step="0.01"
                          min="0"
                          placeholder="0"
                          value={scores[s.id] ?? ""}
                          onChange={(e) => handleScoreChange(s.id, e.target.value)}
                          className="h-8"
                        />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}

          <CardFooter className="justify-end gap-2 px-0">
            <Button type="button" variant="outline" onClick={() => router.back()}>
              Cancel
            </Button>
            <SubmitButton />
          </CardFooter>
        </form>
      </CardContent>
    </Card>
  )
}