"use client"

import * as React from "react"
import { CalendarDays } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"
import { cn } from "@/shared/lib/utils"

interface ScheduleEntry {
  id: string
  dayOfWeek: number
  period: number
  subject: string
  teacherName: string
  className: string
  room?: string | null
}

interface ClassOption {
  id: string
  name: string
  grade: string
}

interface ScheduleGridViewProps {
  entries: ScheduleEntry[]
  classes: ClassOption[]
  initialClassId?: string
}

const DAYS = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
const PERIODS = [1, 2, 3, 4, 5, 6, 7, 8]

const SUBJECT_COLORS: Record<string, string> = {
  语文: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
  数学: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
  英语: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300",
  物理: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300",
  化学: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300",
  生物: "bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300",
  历史: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
  地理: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300",
  政治: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300",
  体育: "bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-300",
  音乐: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300",
  美术: "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300",
}

function getSubjectColor(subject: string): string {
  return SUBJECT_COLORS[subject] || "bg-muted text-muted-foreground"
}

export function ScheduleGridView({ entries, classes, initialClassId }: ScheduleGridViewProps) {
  const [selectedClassId, setSelectedClassId] = React.useState(initialClassId || classes[0]?.id || "")

  const filteredEntries = React.useMemo(() => {
    if (!selectedClassId) return entries
    return entries.filter((e) => e.className === classes.find((c) => c.id === selectedClassId)?.name)
  }, [entries, selectedClassId, classes])

  const scheduleMap = React.useMemo(() => {
    const map = new Map<string, ScheduleEntry>()
    for (const entry of filteredEntries) {
      const key = `${entry.dayOfWeek}-${entry.period}`
      map.set(key, entry)
    }
    return map
  }, [filteredEntries])

  if (classes.length === 0) {
    return (
      <Card className="shadow-none">
        <CardContent className="py-10 text-center text-muted-foreground">
          暂无可用班级，请先创建班级。
        </CardContent>
      </Card>
    )
  }

  return (
    <Card className="shadow-none">
      <CardHeader className="flex flex-row items-center justify-between space-y-0">
        <div className="flex items-center gap-2">
          <CalendarDays className="h-5 w-5 text-primary" />
          <CardTitle className="text-base">课表网格</CardTitle>
        </div>
        <Select value={selectedClassId} onValueChange={setSelectedClassId}>
          <SelectTrigger className="w-48">
            <SelectValue placeholder="选择班级" />
          </SelectTrigger>
          <SelectContent>
            {classes.map((c) => (
              <SelectItem key={c.id} value={c.id}>
                {c.grade} - {c.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
              <tr>
                <th className="border border-border bg-muted/50 px-3 py-2 text-sm font-medium text-muted-foreground">
                  节次
                </th>
                {DAYS.map((day) => (
                  <th
                    key={day}
                    className="border border-border bg-muted/50 px-3 py-2 text-center text-sm font-medium text-muted-foreground"
                  >
                    {day}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {PERIODS.map((period) => (
                <tr key={period}>
                  <td className="border border-border bg-muted/30 px-3 py-2 text-center text-sm font-medium">
                    第{period}节
                  </td>
                  {DAYS.map((_, dayIndex) => {
                    const entry = scheduleMap.get(`${dayIndex + 1}-${period}`)
                    return (
                      <td
                        key={dayIndex}
                        className="border border-border px-2 py-2 align-top"
                        style={{ minWidth: 100, height: 60 }}
                      >
                        {entry ? (
                          <div
                            className={cn(
                              "flex h-full flex-col justify-center rounded px-2 py-1 text-xs",
                              getSubjectColor(entry.subject)
                            )}
                          >
                            <div className="font-medium">{entry.subject}</div>
                            <div className="opacity-80">{entry.teacherName}</div>
                            {entry.room && (
                              <div className="opacity-60">@{entry.room}</div>
                            )}
                          </div>
                        ) : (
                          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
                            -
                          </div>
                        )}
                      </td>
                    )
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="mt-4 flex flex-wrap gap-2">
          {Object.entries(SUBJECT_COLORS).map(([subject, color]) => (
            <Badge key={subject} variant="outline" className={cn("border-0", color)}>
              {subject}
            </Badge>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
