import { Link } from 'react-router-dom';
import type { WatchlistEntry } from '../../lib/types';
import { formatPrice } from '../../lib/format';
import { useRemoveFromWatchlist } from '../../hooks/useWatchlist';

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

function changeColor(value: number): string {
  if (value > 0) return 'text-emerald-400';
  if (value < 0) return 'text-red-400';
  return 'text-gray-300';
}

interface WatchlistTableProps {
  entries: WatchlistEntry[];
}

export function WatchlistTable({ entries }: WatchlistTableProps) {
  const removeMutation = useRemoveFromWatchlist();

  if (entries.length === 0) {
    return (
      <p className="py-8 text-center text-sm text-gray-500">
        No watchlist entries yet. Add a symbol above to get started.
      </p>
    );
  }

  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">Symbol</th>
            <th className="px-4 py-3">Price</th>
            <th className="px-4 py-3">Day</th>
            <th className="px-4 py-3">Score</th>
            <th className="px-4 py-3">Dimensions</th>
            <th className="px-4 py-3">R:R</th>
            <th className="px-4 py-3">Direction</th>
            <th className="px-4 py-3">Momentum</th>
            <th className="px-4 py-3"></th>
          </tr>
        </thead>
        <tbody>
          {entries.map((entry) => (
            <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">
                <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 num text-gray-200">
                {entry.last_close !== null ? formatPrice(entry.last_close) : <span className="text-gray-500">—</span>}
              </td>
              <td className="px-4 py-3.5 num">
                {entry.change_pct !== null ? (
                  <span className={changeColor(entry.change_pct)}>
                    {entry.change_pct >= 0 ? '+' : ''}{entry.change_pct.toFixed(2)}%
                  </span>
                ) : (
                  <span className="text-gray-500">—</span>
                )}
              </td>
              <td className="px-4 py-3.5">
                {entry.composite_score !== null ? (
                  <span className={`font-semibold ${scoreColor(entry.composite_score)}`}>
                    {Math.round(entry.composite_score)}
                  </span>
                ) : (
                  <span className="text-gray-500">—</span>
                )}
              </td>
              <td className="px-4 py-3.5">
                {entry.dimensions.length > 0 ? (
                  <div className="flex flex-wrap gap-1">
                    {entry.dimensions.map((d) => (
                      <span
                        key={d.dimension}
                        className={`inline-block rounded-md px-1.5 py-0.5 text-xs bg-white/[0.04] ${scoreColor(d.score)}`}
                        title={d.dimension}
                      >
                        {d.dimension.slice(0, 3).toUpperCase()} {Math.round(d.score)}
                      </span>
                    ))}
                  </div>
                ) : (
                  <span className="text-gray-500">—</span>
                )}
              </td>
              <td className="px-4 py-3.5 font-mono">
                {entry.rr_ratio !== null ? (
                  <span className="text-gray-200">{entry.rr_ratio.toFixed(2)}</span>
                ) : (
                  <span className="text-gray-500">—</span>
                )}
              </td>
              <td className="px-4 py-3.5">
                {entry.rr_direction ? (
                  <span className={entry.rr_direction === 'long' ? 'text-emerald-400' : entry.rr_direction === 'short' ? 'text-red-400' : 'text-gray-400'}>
                    {entry.rr_direction}
                  </span>
                ) : (
                  <span className="text-gray-500">—</span>
                )}
              </td>
              <td className="px-4 py-3.5 num text-gray-200">
                {entry.momentum_percentile !== null ? (
                  `${Math.round(entry.momentum_percentile)}%ile`
                ) : (
                  <span className="text-gray-500">—</span>
                )}
              </td>
              <td className="px-4 py-3.5">
                <button
                  onClick={() => removeMutation.mutate(entry.symbol)}
                  disabled={removeMutation.isPending}
                  className="rounded-lg px-2.5 py-1 text-xs text-red-400 transition-all duration-150 hover:bg-red-500/10 hover:text-red-300 disabled:opacity-50"
                  aria-label={`Remove ${entry.symbol}`}
                >
                  Remove
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
