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";

interface EntityMapping {
  originalValue: string;
  anonymizedValue: string;
  entityType: string;
  startIndex: number;
  endIndex: number;
}

interface EntityMappingTableProps {
  mappings: EntityMapping[];
}

export const EntityMappingTable = ({ mappings }: EntityMappingTableProps) => {
  if (!mappings || mappings.length === 0) {
    return (
      <Card className="mt-6">
        <CardHeader className="pb-4">
          <CardTitle className="text-base sm:text-lg font-medium text-[#092727]">
            Tableau de mapping des entités
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-500 text-center py-4 text-sm">
            Aucune entité sensible détectée dans le texte.
          </p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="mt-6">
      <CardHeader className="pb-4">
        <CardTitle className="text-base sm:text-lg font-medium text-[#092727]">
          Tableau de mapping des entités ({mappings.length} entité
          {mappings.length > 1 ? "s" : ""} anonymisée
          {mappings.length > 1 ? "s" : ""})
        </CardTitle>
      </CardHeader>
      <CardContent className="px-2 sm:px-6">
        {/* Version mobile : Cards empilées */}
        <div className="block sm:hidden space-y-4">
          {mappings.map((mapping, index) => (
            <div
              key={index}
              className="border border-gray-200 rounded-lg p-4 bg-gray-50"
            >
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-gray-600">
                    Type d&apos;entité
                  </span>
                  <Badge
                    variant="outline"
                    className="bg-[#f7ab6e] bg-opacity-20 text-[#092727] border-[#f7ab6e] text-xs"
                  >
                    {mapping.entityType}
                  </Badge>
                </div>
                <div className="space-y-2">
                  <div>
                    <span className="text-xs font-medium text-gray-600 block mb-1">
                      Valeur originale
                    </span>
                    <div className="font-mono text-xs bg-red-50 text-red-700 p-2 rounded border break-all">
                      {mapping.originalValue}
                    </div>
                  </div>
                  <div>
                    <span className="text-xs font-medium text-gray-600 block mb-1">
                      Valeur anonymisée
                    </span>
                    <div className="font-mono text-xs bg-green-50 text-green-700 p-2 rounded border break-all">
                      {mapping.anonymizedValue}
                    </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]">
                  Valeur originale
                </TableHead>
                <TableHead className="font-semibold text-[#092727] min-w-[150px]">
                  Valeur anonymisée
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {mappings.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.entityType}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-mono text-sm bg-red-50 text-red-700 py-4 max-w-[200px] break-all">
                    {mapping.originalValue}
                  </TableCell>
                  <TableCell className="font-mono text-sm bg-green-50 text-green-700 py-4 max-w-[200px] break-all">
                    {mapping.anonymizedValue}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
};