import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';

import { useMemo, useState } from 'react';

import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import { formatNumber, formatPercentRaw } from '@/lib/format';
import { cn } from '@/lib/utils';

interface TopicEntity {
  id: number;
  entity_text: string;
  entity_type: string;
  demand_volume: number;
  coverage_strength: number;
  source: string;
}

interface EntityListProps {
  entities: TopicEntity[];
}

type SortField = 'entity_text' | 'demand_volume' | 'coverage_strength';
type SortDirection = 'asc' | 'desc';

function getCoverageClasses(coverage: number): string {
  if (coverage < 30) {
    return 'border-l-2 border-l-red-500 bg-red-50/50 dark:bg-red-950/20';
  }
  if (coverage < 70) {
    return 'border-l-2 border-l-yellow-500 bg-yellow-50/50 dark:bg-yellow-950/20';
  }
  return 'border-l-2 border-l-green-500 bg-green-50/50 dark:bg-green-950/20';
}

function getCoverageBadgeVariant(coverage: number): 'default' | 'medium' | 'destructive' {
  if (coverage >= 70) return 'default';
  if (coverage >= 30) return 'medium';
  return 'destructive';
}

function capitalizeFirst(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export default function EntityList({ entities }: EntityListProps) {
  const [sortField, setSortField] = useState<SortField>('demand_volume');
  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');

  const handleSort = (field: SortField) => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDirection('desc');
    }
  };

  const sortedEntities = useMemo(() => {
    const sorted = [...entities];
    sorted.sort((a, b) => {
      let aVal = a[sortField];
      let bVal = b[sortField];

      // For string comparisons, use case-insensitive
      if (typeof aVal === 'string' && typeof bVal === 'string') {
        aVal = aVal.toLowerCase();
        bVal = bVal.toLowerCase();
      }

      if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
      if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
      return 0;
    });
    return sorted;
  }, [entities, sortField, sortDirection]);

  const getSortIcon = (field: SortField) => {
    if (sortField !== field) {
      return <ArrowUpDown className="ml-2 h-4 w-4" />;
    }
    return sortDirection === 'asc' ? (
      <ArrowUp className="ml-2 h-4 w-4" />
    ) : (
      <ArrowDown className="ml-2 h-4 w-4" />
    );
  };

  if (entities.length === 0) {
    return <p className="text-sm text-muted-foreground py-4">No entities found in this cluster.</p>;
  }

  return (
    <div className="rounded-lg border">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[40%]">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleSort('entity_text')}
                className="-ml-4"
              >
                Entity
                {getSortIcon('entity_text')}
              </Button>
            </TableHead>
            <TableHead className="hidden md:table-cell">Type</TableHead>
            <TableHead className="text-right">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleSort('demand_volume')}
                className="float-right"
              >
                Demand
                {getSortIcon('demand_volume')}
              </Button>
            </TableHead>
            <TableHead className="text-right">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleSort('coverage_strength')}
                className="float-right"
              >
                Coverage
                {getSortIcon('coverage_strength')}
              </Button>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {sortedEntities.map((entity) => (
            <TableRow key={entity.id} className={cn(getCoverageClasses(entity.coverage_strength))}>
              <TableCell className="font-medium">{entity.entity_text}</TableCell>
              <TableCell className="hidden md:table-cell">
                <span className="text-sm text-muted-foreground">
                  {capitalizeFirst(entity.entity_type)}
                </span>
              </TableCell>
              <TableCell className="text-right">{formatNumber(entity.demand_volume)}</TableCell>
              <TableCell className="text-right">
                <Badge variant={getCoverageBadgeVariant(entity.coverage_strength)}>
                  {formatPercentRaw(entity.coverage_strength, 1)}
                </Badge>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}