"use client"

import { useState, useRef, useEffect, useCallback } from "react"
import { useFormStatus } from "react-dom"
import { toast } from "sonner"
import { useRouter } from "next/navigation"
import { useTranslations } from "next-intl"
import { CalendarDays, Search, CheckCircle2, XCircle, Clock, LogOut, FileText } from "lucide-react"

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 {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/shared/components/ui/alert-dialog"
import { cn } from "@/shared/lib/utils"

import { batchRecordAttendanceAction } from "../actions"
import {
  ATTENDANCE_STATUS_LABEL_KEYS,
  type AttendanceStatus,
} from "../constants"

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

const STATUS_OPTIONS: AttendanceStatus[] = [
  "present",
  "absent",
  "late",
  "early_leave",
  "excused",
]

const STATUS_SHORTCUTS: Record<string, AttendanceStatus> = {
  p: "present",
  a: "absent",
  l: "late",
  e: "early_leave",
  x: "excused",
}

const STATUS_STYLES: Record<AttendanceStatus, { active: string; icon: typeof CheckCircle2 }> = {
  present: { active: "bg-emerald-500 text-white border-emerald-500 hover:bg-emerald-600", icon: CheckCircle2 },
  absent: { active: "bg-red-500 text-white border-red-500 hover:bg-red-600", icon: XCircle },
  late: { active: "bg-amber-500 text-white border-amber-500 hover:bg-amber-600", icon: Clock },
  early_leave: { active: "bg-blue-500 text-white border-blue-500 hover:bg-blue-600", icon: LogOut },
  excused: { active: "bg-purple-500 text-white border-purple-500 hover:bg-purple-600", icon: FileText },
}

/** 初始化状态计数，避免 `{} as Record<...>` 类型断言 */
function createInitialStatusCounts(): Record<AttendanceStatus, number> {
  return {
    present: 0,
    absent: 0,
    late: 0,
    early_leave: 0,
    excused: 0,
  }
}

function SubmitButton() {
  const { pending } = useFormStatus()
  const t = useTranslations("attendance")
  return (
    <Button type="submit" disabled={pending}>
      {pending ? t("actions.save") + "..." : t("actions.save")}
    </Button>
  )
}

export function AttendanceSheet({
  classes,
  students,
  defaultClassId,
  defaultDate,
}: {
  classes: Option[]
  students: Student[]
  defaultClassId?: string
  defaultDate?: string
}) {
  const router = useRouter()
  const t = useTranslations("attendance")
  const today = new Date().toISOString().slice(0, 10)
  const [classId, setClassId] = useState(defaultClassId ?? classes[0]?.id ?? "")
  const [date, setDate] = useState(defaultDate ?? today)
  const [statuses, setStatuses] = useState<Record<string, AttendanceStatus>>({})
  const [searchQuery, setSearchQuery] = useState("")
  const [focusedStudentIndex, setFocusedStudentIndex] = useState(0)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [showSwitchConfirm, setShowSwitchConfirm] = useState(false)
  const [pendingClassId, setPendingClassId] = useState<string | null>(null)
  const studentRefs = useRef<(HTMLTableRowElement | null)[]>([])

  const handleStatusChange = useCallback((studentId: string, status: AttendanceStatus) => {
    setStatuses((prev) => ({ ...prev, [studentId]: status }))
  }, [])

  const markAllPresent = useCallback(() => {
    const all: Record<string, AttendanceStatus> = {}
    for (const s of students) all[s.id] = "present"
    setStatuses(all)
    toast.success(t("actions.markAllPresent"))
  }, [students, t])

  const handleClassChange = (newClassId: string) => {
    const hasUnsaved = Object.keys(statuses).length > 0
    if (hasUnsaved && newClassId !== classId) {
      setPendingClassId(newClassId)
      setShowSwitchConfirm(true)
      return
    }
    confirmClassSwitch(newClassId)
  }

  const confirmClassSwitch = (newClassId: string) => {
    setClassId(newClassId)
    setStatuses({})
    const newUrl = newClassId ? `/teacher/attendance/sheet?classId=${encodeURIComponent(newClassId)}` : "/teacher/attendance/sheet"
    router.push(newUrl)
  }

  const filteredStudents = students.filter(
    (s) => !searchQuery || s.name.toLowerCase().includes(searchQuery.toLowerCase())
  )

  const statusCounts = STATUS_OPTIONS.reduce(
    (acc, st) => {
      acc[st] = students.filter((s) => (statuses[s.id] ?? "present") === st).length
      return acc
    },
    createInitialStatusCounts()
  )

  // 派生值：当筛选结果变少时，焦点索引自动夹紧到有效范围，避免 useEffect 重置导致的级联渲染
  const effectiveFocusedIndex = filteredStudents.length === 0
    ? 0
    : Math.min(focusedStudentIndex, filteredStudents.length - 1)

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
      const key = e.key.toLowerCase()
      if (STATUS_SHORTCUTS[key] && filteredStudents[effectiveFocusedIndex]) {
        e.preventDefault()
        handleStatusChange(filteredStudents[effectiveFocusedIndex].id, STATUS_SHORTCUTS[key])
        if (effectiveFocusedIndex < filteredStudents.length - 1) {
          setFocusedStudentIndex((prev) => prev + 1)
        }
      }
      if (e.key === "ArrowDown" && effectiveFocusedIndex < filteredStudents.length - 1) {
        e.preventDefault()
        setFocusedStudentIndex((prev) => prev + 1)
      }
      if (e.key === "ArrowUp" && effectiveFocusedIndex > 0) {
        e.preventDefault()
        setFocusedStudentIndex((prev) => prev - 1)
      }
    }
    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [filteredStudents, effectiveFocusedIndex, handleStatusChange])

  useEffect(() => {
    studentRefs.current[effectiveFocusedIndex]?.scrollIntoView({ block: "nearest" })
  }, [effectiveFocusedIndex])

  const handleSubmit = async (formData: FormData) => {
    if (!classId || !date) {
      toast.error(t("errors.invalidForm"))
      return
    }

    const records = students.map((s) => ({
      studentId: s.id,
      classId,
      date,
      status: statuses[s.id] ?? "present",
    }))

    if (records.length === 0) {
      toast.error(t("sheet.noStudents"))
      return
    }

    setIsSubmitting(true)
    formData.set("recordsJson", JSON.stringify(records))

    try {
      const result = await batchRecordAttendanceAction(null, formData)
      if (result.success) {
        toast.success(result.message || t("sheet.saved"))
        router.push("/teacher/attendance")
        router.refresh()
      } else {
        toast.error(result.message || t("errors.unexpected"))
      }
    } catch {
      toast.error(t("errors.unexpected"))
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Card className="relative">
      {isSubmitting && (
        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/60 backdrop-blur-sm">
          <div className="flex items-center gap-2 text-sm font-medium">
            <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
            {t("sheet.saved")}...
          </div>
        </div>
      )}
      <CardHeader>
        <CardTitle>{t("title.sheet")}</CardTitle>
        <p className="text-sm text-muted-foreground">
          {t("description.teacherRecords")}
        </p>
      </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 htmlFor="class-select">{t("filters.class")}</Label>
              <Select value={classId} onValueChange={handleClassChange}>
                <SelectTrigger id="class-select">
                  <SelectValue placeholder={t("sheet.selectClass")} />
                </SelectTrigger>
                <SelectContent>
                  {classes.map((c) => (
                    <SelectItem key={c.id} value={c.id}>
                      {c.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-2">
              <Label htmlFor="date">{t("filters.date")}</Label>
              <div className="relative">
                <CalendarDays className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="date"
                  type="date"
                  value={date}
                  onChange={(e) => setDate(e.target.value)}
                  className="pl-9"
                  required
                  aria-label={t("filters.date")}
                />
              </div>
            </div>
          </div>

          {students.length === 0 ? (
            <p className="text-sm text-muted-foreground">
              {t("sheet.noStudents")}
            </p>
          ) : (
            <>
              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div className="flex flex-wrap items-center gap-2">
                  {STATUS_OPTIONS.map((st) => {
                    const Icon = STATUS_STYLES[st].icon
                    return (
                      <span key={st} className="inline-flex items-center gap-1 rounded-md border bg-muted/50 px-2 py-1 text-xs">
                        <Icon className="h-3 w-3" aria-hidden="true" />
                        {t(ATTENDANCE_STATUS_LABEL_KEYS[st])}
                        <span className="font-semibold tabular-nums">{statusCounts[st]}</span>
                      </span>
                    )
                  })}
                </div>
                <div className="flex items-center gap-2">
                  <div className="relative">
                    <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                    <Input
                      type="search"
                      placeholder={t("list.columns.student")}
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="h-8 w-40 pl-8 text-sm"
                      aria-label={t("list.columns.student")}
                    />
                  </div>
                  <Button type="button" variant="outline" size="sm" onClick={markAllPresent}>
                    {t("actions.markAllPresent")}
                  </Button>
                </div>
              </div>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-12">#</TableHead>
                      <TableHead>{t("list.columns.student")}</TableHead>
                      <TableHead className="hidden md:table-cell">{t("list.columns.remark")}</TableHead>
                      <TableHead>{t("list.columns.status")}</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredStudents.map((s, idx) => {
                      const currentStatus = statuses[s.id] ?? "present"
                      const isFocused = idx === effectiveFocusedIndex
                      return (
                        <TableRow
                          key={s.id}
                          ref={(el) => { studentRefs.current[idx] = el }}
                          className={cn("cursor-pointer", isFocused && "bg-primary/5")}
                          onClick={() => setFocusedStudentIndex(idx)}
                          role="button"
                          tabIndex={isFocused ? 0 : -1}
                          aria-label={s.name}
                        >
                          <TableCell className="text-muted-foreground tabular-nums">{idx + 1}</TableCell>
                          <TableCell className="font-medium">{s.name}</TableCell>
                          <TableCell className="hidden text-muted-foreground md:table-cell">{s.email}</TableCell>
                          <TableCell>
                            <div className="flex flex-wrap gap-1">
                              {STATUS_OPTIONS.map((st) => {
                                const Icon = STATUS_STYLES[st].icon
                                const isActive = currentStatus === st
                                return (
                                  <button
                                    key={st}
                                    type="button"
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      handleStatusChange(s.id, st)
                                    }}
                                    className={cn(
                                      "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors",
                                      isActive
                                        ? STATUS_STYLES[st].active
                                        : "border-border bg-background text-muted-foreground hover:bg-muted"
                                    )}
                                    aria-pressed={isActive}
                                    aria-label={`${t(ATTENDANCE_STATUS_LABEL_KEYS[st])} (${st[0].toUpperCase()})`}
                                  >
                                    <Icon className="h-3 w-3" aria-hidden="true" />
                                    <span className="hidden sm:inline">{t(ATTENDANCE_STATUS_LABEL_KEYS[st])}</span>
                                    <span className="sm:hidden">{st[0].toUpperCase()}</span>
                                  </button>
                                )
                              })}
                            </div>
                          </TableCell>
                        </TableRow>
                      )
                    })}
                  </TableBody>
                </Table>
              </div>
            </>
          )}

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

      <AlertDialog open={showSwitchConfirm} onOpenChange={setShowSwitchConfirm}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t("sheet.confirmDelete")}</AlertDialogTitle>
            <AlertDialogDescription>
              {t("description.teacherRecords")}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{t("actions.cancel")}</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                if (pendingClassId) {
                  confirmClassSwitch(pendingClassId)
                  setPendingClassId(null)
                }
                setShowSwitchConfirm(false)
              }}
            >
              {t("actions.save")}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Card>
  )
}