import { Link } from 'react-router-dom';
import type { TradeSetup } from '../../lib/types';
import { formatPrice, formatDateTime } from '../../lib/format';

export type SortColumn = 'symbol' | 'direction' | 'entry_price' | 'stop_loss' | 'target' | 'rr_ratio' | 'composite_score' | 'detected_at';
export type SortDirection = 'asc' | 'desc';

interface TradeTableProps {
  trades: TradeSetup[];
  sortColumn: SortColumn;
  sortDirection: SortDirection;
  onSort: (column: SortColumn) => void;
}

const columns: { key: SortColumn; label: string }[] = [
  { key: 'symbol', label: 'Symbol' },
  { key: 'direction', label: 'Direction' },
  { key: 'entry_price', label: 'Entry' },
  { key: 'stop_loss', label: 'Stop Loss' },
  { key: 'target', label: 'Target' },
  { key: 'rr_ratio', label: 'R:R' },
  { key: 'composite_score', label: 'Score' },
  { key: 'detected_at', label: 'Detected' },
];

function sortIndicator(column: SortColumn, active: SortColumn, dir: SortDirection) {
  if (column !== active) return '';
  return dir === 'asc' ? ' ▲' : ' ▼';
}

export function TradeTable({ trades, sortColumn, sortDirection, onSort }: TradeTableProps) {
  if (trades.length === 0) {
    return <p className="py-8 text-center text-sm text-gray-500">No trade setups match the current filters.</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">
            {columns.map((col) => (
              <th
                key={col.key}
                className="cursor-pointer select-none px-4 py-3 hover:text-gray-300 transition-colors duration-150"
                onClick={() => onSort(col.key)}
              >
                {col.label}{sortIndicator(col.key, sortColumn, sortDirection)}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {trades.map((trade) => (
            <tr key={trade.id} 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/${trade.symbol}`} className="font-medium text-blue-400 hover:text-blue-300 transition-colors duration-150">
                  {trade.symbol}
                </Link>
              </td>
              <td className="px-4 py-3.5">
                <span className={trade.direction === 'long' ? 'font-medium text-emerald-400' : 'font-medium text-red-400'}>
                  {trade.direction}
                </span>
              </td>
              <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(trade.entry_price)}</td>
              <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(trade.stop_loss)}</td>
              <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(trade.target)}</td>
              <td className="px-4 py-3.5 font-mono font-semibold text-gray-200">{trade.rr_ratio.toFixed(2)}</td>
              <td className="px-4 py-3.5">
                <span className={`font-semibold ${trade.composite_score > 70 ? 'text-emerald-400' : trade.composite_score >= 40 ? 'text-amber-400' : 'text-red-400'}`}>
                  {Math.round(trade.composite_score)}
                </span>
              </td>
              <td className="px-4 py-3.5 text-gray-400">{formatDateTime(trade.detected_at)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}