import { Link } from '@tanstack/react-router';
import { usePositions, useCompanies } from '../api/hooks';
import { DataTable, type Column } from '../components/DataTable';
import { LoadingSpinner } from '../components/ui';
import type { Position } from '../api/hooks';

function fmtUsd(v: number | null | undefined) {
  if (v == null) return '—';
  return `$${v.toFixed(2)}`;
}

function pnlColor(v: number | null | undefined) {
  if (v == null) return 'text-gray-400';
  return v >= 0 ? 'text-green-400' : 'text-red-400';
}

export function PositionsPage() {
  const { data, isLoading } = usePositions();
  const { data: companies } = useCompanies();

  // Build ticker → company ID lookup
  const tickerToId: Record<string, string> = {};
  for (const c of companies ?? []) {
    tickerToId[c.ticker] = c.id;
  }

  const posColumns: Column<Position>[] = [
    {
      key: 'ticker',
      header: 'Ticker',
      render: (r) => {
        const companyId = tickerToId[r.ticker];
        return companyId ? (
          <Link to="/companies/$id" params={{ id: companyId }} className="font-mono font-semibold text-brand-300 hover:underline">
            {r.ticker}
          </Link>
        ) : (
          <span className="font-mono font-semibold text-brand-300">{r.ticker}</span>
        );
      },
    },
    { key: 'quantity', header: 'Qty' },
    { key: 'avg_entry_price', header: 'Entry', render: (r) => <span>{fmtUsd(r.avg_entry_price)}</span> },
    { key: 'current_price', header: 'Current', render: (r) => <span>{fmtUsd(r.current_price)}</span> },
    { key: 'unrealized_pnl', header: 'Unrealized P&L', render: (r) => <span className={pnlColor(r.unrealized_pnl)}>{fmtUsd(r.unrealized_pnl)}</span> },
    { key: 'realized_pnl', header: 'Realized P&L', render: (r) => <span className={pnlColor(r.realized_pnl)}>{fmtUsd(r.realized_pnl)}</span> },
    { key: 'updated_at', header: 'Updated', render: (r) => <span className="text-xs">{new Date(r.updated_at).toLocaleString()}</span> },
  ];

  if (isLoading) return <LoadingSpinner />;

  const positions = data ?? [];

  const totals = positions.reduce(
    (acc, p) => ({
      quantity: acc.quantity + p.quantity,
      unrealized_pnl: acc.unrealized_pnl + (p.unrealized_pnl ?? 0),
      realized_pnl: acc.realized_pnl + (p.realized_pnl ?? 0),
      market_value: acc.market_value + p.quantity * (p.current_price ?? 0),
      cost_basis: acc.cost_basis + p.quantity * p.avg_entry_price,
    }),
    { quantity: 0, unrealized_pnl: 0, realized_pnl: 0, market_value: 0, cost_basis: 0 },
  );

  const footer = positions.length > 0 ? (
    <tr className="font-semibold text-gray-200">
      <td className="px-3 py-2">Totals</td>
      <td className="px-3 py-2">{totals.quantity}</td>
      <td className="px-3 py-2">{fmtUsd(totals.cost_basis)}</td>
      <td className="px-3 py-2">{fmtUsd(totals.market_value)}</td>
      <td className={`px-3 py-2 ${pnlColor(totals.unrealized_pnl)}`}>{fmtUsd(totals.unrealized_pnl)}</td>
      <td className={`px-3 py-2 ${pnlColor(totals.realized_pnl)}`}>{fmtUsd(totals.realized_pnl)}</td>
      <td className="px-3 py-2" />
    </tr>
  ) : undefined;

  return (
    <div>
      <h1 className="mb-4 text-xl font-semibold text-gray-100">Positions</h1>
      <DataTable<Position>
        data={positions}
        columns={posColumns}
        keyField="id"
        footerRow={footer}
      />
    </div>
  );
}
