import { BenchmarkResult } from "@/types/benchmark";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { CheckCircle2, XCircle } from "lucide-react";

interface BenchmarkTableProps {
  results: BenchmarkResult[];
}

export const BenchmarkTable = ({ results }: BenchmarkTableProps) => {
  // Sort by response time (fastest first)
  const sortedResults = [...results].sort((a, b) => {
    if (a.status === "error" && b.status === "success") return 1;
    if (a.status === "success" && b.status === "error") return -1;
    return a.responseTime - b.responseTime;
  });

  return (
    <div className="rounded-lg border border-border bg-card overflow-hidden">
      <Table>
        <TableHeader>
          <TableRow className="bg-muted/50">
            <TableHead className="font-semibold">Mirror</TableHead>
            <TableHead className="font-semibold">URL</TableHead>
            <TableHead className="font-semibold text-right">Response Time</TableHead>
            <TableHead className="font-semibold">Status</TableHead>
            <TableHead className="font-semibold">HTTP Code</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {sortedResults.map((result, index) => (
            <TableRow key={index} className="hover:bg-muted/30 transition-colors">
              <TableCell className="font-medium">{result.mirrorName}</TableCell>
              <TableCell className="font-mono text-sm text-muted-foreground">
                {result.mirrorUrl}
              </TableCell>
              <TableCell className="text-right font-mono text-sm">
                {result.status === "success" ? (
                  <span className="text-foreground font-medium">
                    {result.responseTime.toFixed(0)}ms
                  </span>
                ) : (
                  <span className="text-muted-foreground">—</span>
                )}
              </TableCell>
              <TableCell>
                {result.status === "success" ? (
                  <Badge
                    variant="outline"
                    className="bg-success/10 text-success border-success/20 gap-1"
                  >
                    <CheckCircle2 className="w-3 h-3" />
                    Success
                  </Badge>
                ) : (
                  <Badge
                    variant="outline"
                    className="bg-destructive/10 text-destructive border-destructive/20 gap-1"
                  >
                    <XCircle className="w-3 h-3" />
                    Error
                  </Badge>
                )}
              </TableCell>
              <TableCell className="font-mono text-sm">
                {result.statusCode ? (
                  <span
                    className={
                      result.statusCode >= 200 && result.statusCode < 300
                        ? "text-success"
                        : "text-destructive"
                    }
                  >
                    {result.statusCode}
                  </span>
                ) : (
                  <span className="text-muted-foreground">—</span>
                )}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      {sortedResults.length === 0 && (
        <div className="text-center py-12 text-muted-foreground">
          No results yet. Enter a DID and run the benchmark.
        </div>
      )}
    </div>
  );
};