import { usePositions } 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';
}

const columns: Column<Position>[] = [
  { key: 'ticker', header: 'Ticker', className: 'font-mono font-semibold text-brand-300' },
  { 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> },
];

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

  if (isLoading) return <LoadingSpinner />;

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