lunarfront-app/packages/admin/src/routes/_authenticated/accounts/$accountId/members.tsx

import { useState } from 'react'
import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { memberListOptions, memberMutations, memberKeys } from '@/api/members'
import { identifierListOptions, identifierMutations, identifierKeys } from '@/api/identifiers'
import { MemberForm } from '@/components/accounts/member-form'
import { IdentifierForm } from '@/components/accounts/identifier-form'
import { usePagination } from '@/hooks/use-pagination'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Skeleton } from '@/components/ui/skeleton'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Plus, Trash2, CreditCard, ChevronDown, ChevronRight, ChevronLeft, MoreVertical, Pencil, Search, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
import { toast } from 'sonner'

export const Route = createFileRoute('/_authenticated/accounts/$accountId/members')({
  validateSearch: (search: Record<string, unknown>) => ({
    page: Number(search.page) || 1,
    limit: Number(search.limit) || 25,
    q: (search.q as string) || undefined,
    sort: (search.sort as string) || undefined,
    order: (search.order as 'asc' | 'desc') || 'asc',
  }),
  component: MembersTab,
})

const ID_TYPE_LABELS: Record<string, string> = {
  drivers_license: "Driver's License",
  passport: 'Passport',
  school_id: 'School ID',
}

function MemberIdentifiers({ memberId }: { memberId: string }) {
  const queryClient = useQueryClient()
  const [addOpen, setAddOpen] = useState(false)
  const { data, isLoading } = useQuery(identifierListOptions(memberId))

  const createMutation = useMutation({
    mutationFn: (data: Record<string, unknown>) => identifierMutations.create(memberId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: identifierKeys.all(memberId) })
      toast.success('ID added')
      setAddOpen(false)
    },
    onError: (err) => toast.error(err.message),
  })

  const deleteMutation = useMutation({
    mutationFn: identifierMutations.delete,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: identifierKeys.all(memberId) })
      toast.success('ID removed')
    },
    onError: (err) => toast.error(err.message),
  })

  const identifiers = data?.data ?? []

  return (
    <div className="pl-8 pr-4 py-3 bg-muted/30 space-y-3">
      <div className="flex items-center justify-between">
        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Identity Documents</span>
        <Dialog open={addOpen} onOpenChange={setAddOpen}>
          <DialogTrigger asChild>
            <Button variant="ghost" size="sm"><Plus className="mr-1 h-3 w-3" />Add ID</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader><DialogTitle>Add Identity Document</DialogTitle></DialogHeader>
            <IdentifierForm memberId={memberId} onSubmit={(data) => createMutation.mutate(data)} loading={createMutation.isPending} />
          </DialogContent>
        </Dialog>
      </div>

      {isLoading ? (
        <p className="text-sm text-muted-foreground">Loading...</p>
      ) : identifiers.length === 0 ? (
        <p className="text-sm text-muted-foreground">No IDs on file</p>
      ) : (
        <div className="space-y-2">
          {identifiers.map((id) => (
            <div key={id.id} className="flex items-center justify-between p-2 rounded-md border bg-background">
              <div className="flex items-center gap-3">
                <CreditCard className="h-4 w-4 text-muted-foreground" />
                <div>
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium">{ID_TYPE_LABELS[id.type] ?? id.type}</span>
                    {id.isPrimary && <Badge variant="secondary">Primary</Badge>}
                  </div>
                  <span className="text-xs text-muted-foreground font-mono">{id.value}</span>
                  {id.issuingAuthority && (
                    <span className="text-xs text-muted-foreground ml-2">— {id.issuingAuthority}</span>
                  )}
                  {id.expiresAt && (
                    <span className="text-xs text-muted-foreground ml-2">Exp: {id.expiresAt}</span>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-1">
                {(id.imageFrontFileId || id.imageBackFileId) && (
                  <Badge variant="outline" className="text-xs">Has images</Badge>
                )}
                <Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(id.id)}>
                  <Trash2 className="h-3 w-3 text-destructive" />
                </Button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

function SortableHeader({ label, sortKey, currentSort, currentOrder, onSort }: {
  label: string
  sortKey: string
  currentSort?: string
  currentOrder?: 'asc' | 'desc'
  onSort: (sort: string, order: 'asc' | 'desc') => void
}) {
  function handleClick() {
    if (currentSort === sortKey) {
      onSort(sortKey, currentOrder === 'asc' ? 'desc' : 'asc')
    } else {
      onSort(sortKey, 'asc')
    }
  }

  const Icon = currentSort !== sortKey ? ArrowUpDown
    : currentOrder === 'asc' ? ArrowUp : ArrowDown

  return (
    <TableHead className="cursor-pointer select-none" onClick={handleClick}>
      <span className="flex items-center">
        {label}
        <Icon className={`ml-1 h-3 w-3 ${currentSort !== sortKey ? 'opacity-40' : ''}`} />
      </span>
    </TableHead>
  )
}

function MembersTab() {
  const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/members' })
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const [dialogOpen, setDialogOpen] = useState(false)
  const [expandedMember, setExpandedMember] = useState<string | null>(null)
  const { params, setPage, setSearch, setSort } = usePagination()
  const [searchInput, setSearchInput] = useState(params.q ?? '')

  const { data, isLoading } = useQuery(memberListOptions(accountId, params))

  const createMutation = useMutation({
    mutationFn: (data: Record<string, unknown>) => memberMutations.create(accountId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: memberKeys.all(accountId) })
      toast.success('Member added')
      setDialogOpen(false)
    },
    onError: (err) => toast.error(err.message),
  })

  const deleteMutation = useMutation({
    mutationFn: memberMutations.delete,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: memberKeys.all(accountId) })
      toast.success('Member removed')
    },
    onError: (err) => toast.error(err.message),
  })

  function handleSearchSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSearch(searchInput)
  }

  const members = data?.data ?? []
  const totalPages = data?.pagination.totalPages ?? 1
  const total = data?.pagination.total ?? 0

  if (isLoading) {
    return (
      <div className="space-y-3">
        {Array.from({ length: 5 }).map((_, i) => (
          <Skeleton key={i} className="h-12 w-full" />
        ))}
      </div>
    )
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Members</h2>
        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
          <DialogTrigger asChild>
            <Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Member</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader><DialogTitle>Add Member</DialogTitle></DialogHeader>
            <MemberForm accountId={accountId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
          </DialogContent>
        </Dialog>
      </div>

      <form onSubmit={handleSearchSubmit} className="flex gap-2 max-w-sm">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search members..."
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
            className="pl-9"
          />
        </div>
        <Button type="submit" variant="secondary">Search</Button>
      </form>

      <div className="space-y-4">
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-8"></TableHead>
                <TableHead>#</TableHead>
                <SortableHeader label="Name" sortKey="last_name" currentSort={params.sort} currentOrder={params.order} onSort={setSort} />
                <SortableHeader label="Email" sortKey="email" currentSort={params.sort} currentOrder={params.order} onSort={setSort} />
                <TableHead>Phone</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="w-12"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {members.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                    No members found
                  </TableCell>
                </TableRow>
              ) : (
                members.map((m) => (
                  <>
                    <TableRow key={m.id}>
                      <TableCell>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-6 w-6 p-0"
                          onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}
                          title="Show IDs"
                        >
                          {expandedMember === m.id
                            ? <ChevronDown className="h-3 w-3" />
                            : <ChevronRight className="h-3 w-3" />}
                        </Button>
                      </TableCell>
                      <TableCell className="font-mono text-sm text-muted-foreground">{m.memberNumber ?? '-'}</TableCell>
                      <TableCell className="font-medium">{m.firstName} {m.lastName}</TableCell>
                      <TableCell>{m.email ?? '-'}</TableCell>
                      <TableCell>{m.phone ?? '-'}</TableCell>
                      <TableCell>
                        {m.isMinor ? <Badge variant="secondary">Minor</Badge> : <Badge>Adult</Badge>}
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => navigate({
                              to: '/members/$memberId',
                              params: { memberId: m.id },
                              search: {} as any,
                            })}>
                              <Pencil className="mr-2 h-4 w-4" />
                              Edit
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}>
                              <CreditCard className="mr-2 h-4 w-4" />
                              {expandedMember === m.id ? 'Hide IDs' : 'View IDs'}
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem className="text-destructive" onClick={() => deleteMutation.mutate(m.id)}>
                              <Trash2 className="mr-2 h-4 w-4" />
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                    {expandedMember === m.id && (
                      <TableRow key={`${m.id}-ids`}>
                        <TableCell colSpan={7} className="p-0">
                          <MemberIdentifiers memberId={m.id} />
                        </TableCell>
                      </TableRow>
                    )}
                  </>
                ))
              )}
            </TableBody>
          </Table>
        </div>

        <div className="flex items-center justify-between text-sm text-muted-foreground">
          <span>{total} total</span>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              disabled={params.page <= 1}
              onClick={() => setPage(params.page - 1)}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <span>
              Page {params.page} of {totalPages}
            </span>
            <Button
              variant="outline"
              size="sm"
              disabled={params.page >= totalPages}
              onClick={() => setPage(params.page + 1)}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}