import {
  BanIcon,
  CheckCircle2Icon,
  CircleDashedIcon,
  ClockIcon,
  HelpCircleIcon,
  type LucideIcon
} from 'lucide-react'

import { Abbr } from '@repo/ui/components/abbr'
import { DateTime } from '@repo/ui/components/datetime'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Badge } from '@repo/ui/components/ui/badge'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@repo/ui/components/ui/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from '@repo/ui/components/ui/table'
import { cn, initials } from '@repo/ui/lib/utils'
import type { Enrollment, Seat } from './route'

const dtOptions: Intl.DateTimeFormatOptions = {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
}

export function Enrollments({
  enrollments,
  seats
}: {
  enrollments: Enrollment[]
  seats: Seat[]
}) {
  return (
    <Card className="lg:max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle className="text-xl">Matrículas relacionadas</CardTitle>
        <CardDescription>
          Acompanhe o status e os detalhes de todas as matrículas relacionadas a
          esta compra.
        </CardDescription>
      </CardHeader>

      <CardContent>
        <Table className="pointer-events-none">
          <TableHeader>
            <TableRow>
              <TableHead>Colaborador</TableHead>
              <TableHead>Curso</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Executada em</TableHead>
              <TableHead>Agendada em</TableHead>
              <TableHead>Revogada em</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {enrollments.map(
              (
                {
                  user,
                  course,
                  status,
                  executed_at,
                  scheduled_at,
                  rollback_at
                },
                idx
              ) => {
                return (
                  <TableRow key={idx}>
                    <TableCell>
                      <div className="flex gap-2.5 items-center">
                        <Avatar className="size-10 hidden lg:block">
                          <AvatarFallback className="border">
                            {initials(user.name)}
                          </AvatarFallback>
                        </Avatar>

                        <ul>
                          <li className="font-bold">
                            <Abbr>{user.name}</Abbr>
                          </li>
                          <li className="text-muted-foreground text-sm">
                            <Abbr>{user.email}</Abbr>
                          </li>
                        </ul>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Abbr>{course.name}</Abbr>
                    </TableCell>
                    <TableCell>
                      <Status status={status} />
                    </TableCell>
                    <TableCell>
                      {executed_at ? (
                        <DateTime options={dtOptions}>{executed_at}</DateTime>
                      ) : null}
                    </TableCell>
                    <TableCell>
                      {scheduled_at ? (
                        <DateTime options={dtOptions}>{scheduled_at}</DateTime>
                      ) : null}
                    </TableCell>
                    <TableCell>
                      {rollback_at ? (
                        <DateTime options={dtOptions}>{rollback_at}</DateTime>
                      ) : null}
                    </TableCell>
                  </TableRow>
                )
              }
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}

const statuses: Record<string, { icon: LucideIcon; color?: string }> = {
  PENDING: {
    icon: CircleDashedIcon,
    color: 'text-blue-400 [&_svg]:text-blue-500'
  },
  SCHEDULED: {
    icon: ClockIcon,
    color: 'text-blue-400 [&_svg]:text-blue-500'
  },
  EXECUTED: {
    icon: CheckCircle2Icon,
    color: 'text-green-400 [&_svg]:text-green-500'
  },
  ROLLBACK: {
    icon: BanIcon,
    color: 'text-orange-400 [&_svg]:text-orange-500'
  }
}

const labels: Record<string, string> = {
  PENDING: 'Pendente',
  EXECUTED: 'Executado',
  SCHEDULED: 'Agendado',
  ROLLBACK: 'Revogado'
}

function Status({ status: s }: { status: string }) {
  const status = labels[s] ?? s
  const { icon: Icon, color } = statuses?.[s] ?? { icon: HelpCircleIcon }

  return (
    <Badge variant="outline" className={cn(color, 'px-1.5')}>
      <Icon className={cn('stroke-2', color)} />
      {status}
    </Badge>
  )
}