'use client'

import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { cn } from '@/lib/utils'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'
import { History, ChevronRight } from 'lucide-react'

export type ReassignmentHistoryProps = {
  roundId: string
}

export function ReassignmentHistory({ roundId }: ReassignmentHistoryProps) {
  const [expanded, setExpanded] = useState(false)
  const { data: events, isLoading } = trpc.assignment.getReassignmentHistory.useQuery(
    { roundId },
    { enabled: expanded },
  )

  return (
    <Card>
      <CardHeader
        className="cursor-pointer select-none"
        onClick={() => setExpanded(!expanded)}
      >
        <CardTitle className="text-base flex items-center gap-2">
          <History className="h-4 w-4" />
          Reassignment History
          <ChevronRight className={cn('h-4 w-4 ml-auto transition-transform', expanded && 'rotate-90')} />
        </CardTitle>
        <CardDescription>Juror dropout, COI, transfer, and cap redistribution audit trail</CardDescription>
      </CardHeader>
      {expanded && (
        <CardContent>
          {isLoading ? (
            <div className="space-y-3">
              {[1, 2].map((i) => <Skeleton key={i} className="h-16 w-full" />)}
            </div>
          ) : !events || events.length === 0 ? (
            <p className="text-sm text-muted-foreground text-center py-6">
              No reassignment events for this round
            </p>
          ) : (
            <div className="space-y-4 max-h-[500px] overflow-y-auto">
              {events.map((event) => (
                <div key={event.id} className="border rounded-lg p-3 space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Badge variant={event.type === 'DROPOUT' ? 'destructive' : 'secondary'}>
                        {event.type === 'DROPOUT' ? 'Juror Dropout' : event.type === 'COI' ? 'COI Reassignment' : event.type === 'TRANSFER' ? 'Assignment Transfer' : 'Cap Redistribution'}
                      </Badge>
                      <span className="text-sm font-medium">
                        {event.droppedJuror.name}
                      </span>
                    </div>
                    <span className="text-xs text-muted-foreground">
                      {new Date(event.timestamp).toLocaleString()}
                    </span>
                  </div>

                  <p className="text-xs text-muted-foreground">
                    By {event.performedBy.name || event.performedBy.email} — {event.movedCount} project(s) reassigned
                    {event.failedCount > 0 && `, ${event.failedCount} failed`}
                  </p>

                  {event.moves.length > 0 && (
                    <div className="mt-2">
                      <table className="w-full text-xs">
                        <thead>
                          <tr className="text-muted-foreground border-b">
                            <th className="text-left py-1 font-medium">Project</th>
                            <th className="text-left py-1 font-medium">Reassigned To</th>
                          </tr>
                        </thead>
                        <tbody>
                          {event.moves.map((move, i) => (
                            <tr key={i} className="border-b last:border-0">
                              <td className="py-1.5 pr-2 max-w-[250px] truncate">
                                {move.projectTitle}
                              </td>
                              <td className="py-1.5 font-medium">
                                {move.newJurorName}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}

                  {event.failedProjects.length > 0 && (
                    <div className="mt-1">
                      <p className="text-xs font-medium text-destructive">Could not reassign:</p>
                      <ul className="text-xs text-muted-foreground list-disc list-inside">
                        {event.failedProjects.map((p, i) => (
                          <li key={i}>{p}</li>
                        ))}
                      </ul>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </CardContent>
      )}
    </Card>
  )
}