import { Link } from '@tanstack/react-router'
import { ArrowLeft, Loader2 } from 'lucide-react'
import { Badge, Button } from '../../components/ui'
import { useAttendance } from './AttendanceProvider'
import { StudentRow } from './StudentRow'

export function ClassAttendanceView() {
  const {
    sessionInfo,
    studentsPending,
    studentsFailed,
    retryStudents,
    startTime,
    presentCount,
    saveAttendance,
    isSaving,
  } = useAttendance()

  return (
    <section>
      <Link
        to="/"
        className="mb-3 hidden items-center gap-1 text-sm text-foreground/60 transition-colors hover:text-primary lg:inline-flex"
      >
        <ArrowLeft className="size-4" />
        <span>Volver al inicio</span>
      </Link>

      {studentsPending ? (
        <div className="flex items-center justify-center py-16">
          <Loader2 className="size-6 animate-spin text-foreground/40" />
        </div>
      ) : null}

      {studentsFailed ? (
        <div className="mt-4 space-y-3 rounded-xl bg-danger-soft px-4 py-3 text-sm text-danger">
          <p>No pudimos cargar la lista de alumnos.</p>
          <Button variant="outline" size="sm" onClick={retryStudents}>
            Reintentar
          </Button>
        </div>
      ) : null}

      {sessionInfo ? (
        <>
          <header className="sticky top-16 z-30 -mx-4 border-b border-border bg-background/95 px-4 py-3 backdrop-blur lg:mx-0 lg:rounded-xl lg:border lg:px-4">
            <div className="flex items-center justify-between gap-3">
              <div className="min-w-0">
                <h1 className="truncate text-lg font-bold text-primary">{sessionInfo.groupName}</h1>
                <p className="text-xs text-foreground/60">{startTime ? `Hoy · ${startTime} hs` : 'Clase de hoy'}</p>
              </div>
              <Badge variant="success" className="shrink-0 text-sm">
                {presentCount}/{sessionInfo.students.length} presentes
              </Badge>
            </div>
          </header>

          {sessionInfo.students.length === 0 ? (
            <div className="mt-6 rounded-xl border border-dashed border-border bg-surface px-4 py-10 text-center">
              <p className="text-sm font-medium text-primary">Este grupo no tiene alumnos</p>
              <p className="mt-1 text-sm text-foreground/60">
                Agregá miembros desde la ficha del grupo para tomar asistencia.
              </p>
            </div>
          ) : (
            <ul className="mt-4 space-y-3 pb-2">
              {sessionInfo.students.map((student) => (
                <StudentRow key={student.attendeeId} student={student} />
              ))}
            </ul>
          )}

          {sessionInfo.students.length > 0 ? (
            <div className="sticky bottom-20 z-30 mt-6 lg:bottom-6">
              <Button
                variant="primary"
                className="h-12 w-full text-base font-semibold shadow-lg"
                disabled={isSaving}
                onClick={saveAttendance}
              >
                {isSaving ? <Loader2 className="size-4 animate-spin" /> : null}
                Guardar Asistencia
              </Button>
            </div>
          ) : null}
        </>
      ) : null}
    </section>
  )
}