import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { EntityMapping } from "../config/entityLabels";

interface EntityMappingTableProps {
  mappings: EntityMapping[];
}

export const EntityMappingTable = ({ mappings }: EntityMappingTableProps) => {
  if (!mappings || mappings.length === 0) {
    return (
      <Card className="mt-8">
        <CardHeader>
          <CardTitle className="text-lg font-medium text-[#092727]">
            Entités détectées
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-500 text-center py-8">
            Aucune entité détectée dans le document.
          </p>
        </CardContent>
      </Card>
    );
  }

  // Créer un compteur pour chaque type d'entité
  const entityCounts: { [key: string]: number } = {};
  const mappingsWithNumbers = mappings.map((mapping) => {
    const entityType = mapping.entity_type;
    entityCounts[entityType] = (entityCounts[entityType] || 0) + 1;
    return {
      ...mapping,
      entityNumber: entityCounts[entityType],
      displayName: mapping.entity_type,
    };
  });

  return (
    <Card className="mt-8">
      <CardHeader>
        <CardTitle className="text-lg font-medium text-[#092727]">
          Entités détectées ({mappings.length})
        </CardTitle>
      </CardHeader>
      <CardContent>
        {/* Version mobile : Cards empilées */}
        <div className="sm:hidden space-y-4">
          {mappingsWithNumbers.map((mapping, index) => (
            <div
              key={index}
              className="border rounded-lg p-4 bg-white shadow-sm"
            >
              <div className="space-y-3">
                <div>
                  <Badge
                    variant="outline"
                    className="bg-[#f7ab6e] bg-opacity-20 text-[#092727] border-[#f7ab6e]"
                  >
                    {mapping.displayName}
                  </Badge>
                </div>
                <div className="space-y-2">
                  <div>
                    <span className="text-xs font-medium text-gray-600 block mb-1">
                      Texte détecté
                    </span>
                    <div className="font-mono text-xs bg-red-50 text-red-700 p-2 rounded border break-all">
                      {mapping.text}
                    </div>
                  </div>
                  <div>
                    <span className="text-xs font-medium text-gray-600 block mb-1">
                      Identifiant
                    </span>
                    <div className="font-mono text-xs bg-green-50 text-green-700 p-2 rounded border break-all">
                      {mapping.displayName} #{mapping.entityNumber}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Version desktop : Table classique */}
        <div className="hidden sm:block overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="font-semibold text-[#092727] min-w-[120px]">
                  Type d&apos;entité
                </TableHead>
                <TableHead className="font-semibold text-[#092727] min-w-[150px]">
                  Texte détecté
                </TableHead>
                <TableHead className="font-semibold text-[#092727] min-w-[100px]">
                  Identifiant
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {mappingsWithNumbers.map((mapping, index) => (
                <TableRow key={index} className="hover:bg-gray-50">
                  <TableCell className="py-4">
                    <Badge
                      variant="outline"
                      className="bg-[#f7ab6e] bg-opacity-20 text-[#092727] border-[#f7ab6e]"
                    >
                      {mapping.displayName}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-mono text-sm bg-red-50 text-red-700 py-4 max-w-[200px] break-all">
                    {mapping.text}
                  </TableCell>
                  <TableCell className="font-mono text-sm bg-green-50 text-green-700 py-4">
                    {mapping.displayName} #{mapping.entityNumber}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
};