import { Link } from 'react-router-dom';
import type { RankingEntry } from '../../lib/types';

interface RankingsTableProps {
  rankings: RankingEntry[];
}

function scoreColor(score: number): string {
  if (score > 70) return 'text-emerald-400';
  if (score >= 40) return 'text-amber-400';
  return 'text-red-400';
}

export function RankingsTable({ rankings }: RankingsTableProps) {
  if (rankings.length === 0) {
    return <p className="py-8 text-center text-sm text-gray-500">No rankings available.</p>;
  }

  const dimensionNames = rankings.length > 0 ? rankings[0].dimensions.map((d) => d.dimension) : [];

  return (
    <div className="glass overflow-x-auto">
      <table className="w-full text-left text-sm">
        <thead>
          <tr className="border-b border-white/[0.06] text-xs uppercase tracking-wider text-gray-500">
            <th className="px-4 py-3">Rank</th>
            <th className="px-4 py-3">Symbol</th>
            <th className="px-4 py-3">Composite</th>
            {dimensionNames.map((dim) => (
              <th key={dim} className="px-4 py-3">{dim}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rankings.map((entry, index) => (
            <tr key={entry.symbol} className="border-b border-white/[0.04] transition-all duration-200 hover:bg-white/[0.03]">
              <td className="px-4 py-3.5 font-mono text-gray-500">{index + 1}</td>
              <td className="px-4 py-3.5">
                <Link to={`/ticker/${entry.symbol}`} className="font-medium text-blue-400 hover:text-blue-300 transition-colors duration-150">
                  {entry.symbol}
                </Link>
              </td>
              <td className={`px-4 py-3.5 font-semibold ${scoreColor(entry.composite_score)}`}>
                {Math.round(entry.composite_score)}
              </td>
              {entry.dimensions.map((dim) => (
                <td key={dim.dimension} className={`px-4 py-3.5 font-mono ${scoreColor(dim.score)}`}>
                  {Math.round(dim.score)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}