import { useTranslations } from "next-intl"
import { AlertTriangle, TrendingDown, CalendarX } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { cn } from "@/shared/lib/utils"

import type {
  AttendanceWarning,
  AttendanceWarningSeverity,
  AttendanceWarningSummary,
} from "../types"

const SEVERITY_STYLES: Record<AttendanceWarningSeverity, {
  badge: string
  row: string
}> = {
  high: {
    badge: "bg-red-500/10 text-red-700 border-red-500/30",
    row: "border-l-4 border-l-red-500 bg-red-50/50",
  },
  medium: {
    badge: "bg-amber-500/10 text-amber-700 border-amber-500/30",
    row: "border-l-4 border-l-amber-500 bg-amber-50/50",
  },
  low: {
    badge: "bg-yellow-500/10 text-yellow-700 border-yellow-500/30",
    row: "border-l-4 border-l-yellow-500 bg-yellow-50/50",
  },
}

const WARNING_ICONS = {
  low_attendance_rate: TrendingDown,
  consecutive_absence: CalendarX,
} as const

function WarningRow({ warning }: { warning: AttendanceWarning }) {
  const t = useTranslations("attendance.warnings")
  const Icon = WARNING_ICONS[warning.type]
  const style = SEVERITY_STYLES[warning.severity]

  return (
    <div className={cn("flex flex-col gap-2 rounded-md p-3 sm:flex-row sm:items-center sm:justify-between", style.row)}>
      <div className="flex items-center gap-3">
        <Icon className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
        <div className="flex flex-col">
          <span className="font-medium">{warning.studentName}</span>
          <span className="text-xs text-muted-foreground">
            {t(`types.${warning.type}`, {
              current: warning.currentValue,
              threshold: warning.threshold,
            })}
          </span>
        </div>
      </div>
      <div className="flex items-center gap-2">
        {warning.relatedDates.length > 0 && (
          <span className="text-xs text-muted-foreground">
            {t("dates")}: {warning.relatedDates.join(", ")}
          </span>
        )}
        <Badge variant="outline" className={style.badge}>
          {t(`severity.${warning.severity}`)}
        </Badge>
      </div>
    </div>
  )
}

export function AttendanceWarningsCard({ summary }: { summary: AttendanceWarningSummary | null }) {
  const t = useTranslations("attendance.warnings")

  if (!summary || summary.warnings.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5" />
            {t("title")}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <EmptyState
            title={t("noWarnings")}
            description={t("noWarningsDescription")}
            icon={AlertTriangle}
            className="border-none shadow-none"
          />
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between gap-2">
          <span className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5" />
            {t("title")}
          </span>
          <Badge variant="secondary">{summary.warnings.length}</Badge>
        </CardTitle>
        <p className="text-sm text-muted-foreground">
          {t("thresholdSummary", {
            rate: summary.attendanceRateThreshold,
            absence: summary.consecutiveAbsenceThreshold,
          })}
        </p>
      </CardHeader>
      <CardContent className="space-y-2">
        {summary.warnings.map((w, idx) => (
          <WarningRow key={`${w.studentId}-${w.type}-${idx}`} warning={w} />
        ))}
      </CardContent>
    </Card>
  )
}
