import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/components/ui/table"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { CalendarCheck } from "lucide-react"

import { AttendanceStatsCard } from "./attendance-stats-card"
import {
  ATTENDANCE_STATUS_COLORS,
  ATTENDANCE_STATUS_LABELS,
  type StudentAttendanceSummary,
} from "../types"

export function StudentAttendanceView({
  summary,
}: {
  summary: StudentAttendanceSummary | null
}) {
  if (!summary) {
    return (
      <EmptyState
        title="No data"
        description="Student attendance summary is not available."
        icon={CalendarCheck}
        className="border-none shadow-none"
      />
    )
  }

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Student</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">{summary.studentName}</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Total Records</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">{summary.stats.total}</p>
          </CardContent>
        </Card>
      </div>

      <AttendanceStatsCard stats={summary.stats} />

      {summary.recentRecords.length === 0 ? (
        <EmptyState
          title="No attendance records"
          description="There are no attendance records for this student yet."
          icon={CalendarCheck}
          className="border-none shadow-none"
        />
      ) : (
        <Card>
          <CardHeader>
            <CardTitle>Recent Attendance</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Date</TableHead>
                    <TableHead>Class</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Remark</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {summary.recentRecords.map((r) => (
                    <TableRow key={r.id}>
                      <TableCell className="font-medium">{r.date}</TableCell>
                      <TableCell>{r.className}</TableCell>
                      <TableCell>
                        <Badge variant={ATTENDANCE_STATUS_COLORS[r.status]} className="capitalize">
                          {ATTENDANCE_STATUS_LABELS[r.status]}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-muted-foreground">{r.remark ?? "-"}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}