import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { enrollmentListOptions } from '@/api/lessons'
import { DataTable, type Column } from '@/components/shared/data-table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Plus } from 'lucide-react'
import { useAuthStore } from '@/stores/auth.store'
import type { Enrollment } from '@/types/lesson'

export const Route = createFileRoute('/_authenticated/accounts/$accountId/enrollments')({
  component: AccountEnrollmentsTab,
})

function statusBadge(status: string) {
  const variants: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
    active: 'default', paused: 'secondary', cancelled: 'destructive', completed: 'outline',
  }
  return <Badge variant={variants[status] ?? 'outline'}>{status}</Badge>
}

const columns: Column<Enrollment & { memberName?: string }>[] = [
  { key: 'member_name', header: 'Member', sortable: true, render: (e) => <span className="font-medium">{e.memberName ?? e.memberId}</span> },
  { key: 'status', header: 'Status', sortable: true, render: (e) => statusBadge(e.status) },
  { key: 'start_date', header: 'Start', sortable: true, render: (e) => <>{new Date(e.startDate + 'T00:00:00').toLocaleDateString()}</> },
  { key: 'rate', header: 'Rate', render: (e) => <>{e.rate ? `$${e.rate}${e.billingInterval ? ` / ${e.billingInterval} ${e.billingUnit}` : ''}` : <span className="text-muted-foreground">—</span>}</> },
]

function AccountEnrollmentsTab() {
  const { accountId } = Route.useParams()
  const navigate = useNavigate()
  const hasPermission = useAuthStore((s) => s.hasPermission)

  const { data, isLoading } = useQuery({
    ...enrollmentListOptions({ accountId, page: 1, limit: 100 }),
    enabled: !!accountId,
  })

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">{data?.pagination.total ?? 0} enrollment(s)</p>
        {hasPermission('lessons.edit') && (
          <Button size="sm" onClick={() => navigate({ to: '/lessons/enrollments/new', search: {} as Record<string, unknown> })}>
            <Plus className="h-4 w-4 mr-1" />Enroll a Member
          </Button>
        )}
      </div>
      <DataTable
        columns={columns}
        data={data?.data ?? []}
        loading={isLoading}
        page={1}
        totalPages={1}
        total={data?.data?.length ?? 0}
        onPageChange={() => {}}
        onSort={() => {}}
        onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: {} as Record<string, unknown> })}
      />
    </div>
  )
}