import { useTranslations } from "next-intl"
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_BADGE_VARIANTS,
  ATTENDANCE_STATUS_LABEL_KEYS,
} from "../constants"
import type { StudentAttendanceSummary } from "../types"

export function StudentAttendanceView({
  summary,
}: {
  summary: StudentAttendanceSummary | null
}) {
  const t = useTranslations("attendance")

  if (!summary) {
    return (
      <EmptyState
        title={t("list.empty")}
        description={t("errors.notFound")}
        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">
              {t("list.columns.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">
              {t("stats.totalRecords")}
            </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={t("list.empty")}
          description={t("list.emptyDescription")}
          icon={CalendarCheck}
          className="border-none shadow-none"
        />
      ) : (
        <Card>
          <CardHeader>
            <CardTitle>{t("stats.recentRecords")}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>{t("list.columns.date")}</TableHead>
                    <TableHead>{t("list.columns.class")}</TableHead>
                    <TableHead>{t("list.columns.status")}</TableHead>
                    <TableHead>{t("list.columns.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_BADGE_VARIANTS[r.status]} className="capitalize">
                          {t(ATTENDANCE_STATUS_LABEL_KEYS[r.status])}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-muted-foreground">{r.remark ?? "-"}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}