"use client";

import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import type { Position, Order } from "@/lib/types";

interface Props {
  positions: Position[];
  orders: Order[];
}

export function PositionsPanel({ positions, orders }: Props) {
  return (
    <Card className="p-0 overflow-hidden border-border">
      {positions.length > 0 && (
        <div className="p-4 pb-0">
          <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">Positions ({positions.length})</p>
          <Table>
            <TableHeader>
              <TableRow className="border-border/50">
                <TableHead className="text-[9px] h-7">Strategy</TableHead>
                <TableHead className="text-[9px] h-7">Size</TableHead>
                <TableHead className="text-[9px] h-7">Entry</TableHead>
                <TableHead className="text-[9px] h-7 text-right">PnL</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {positions.map((p, i) => (
                <TableRow key={i} className="border-border/50">
                  <TableCell className="text-[10px] py-1.5">{p.strategy}</TableCell>
                  <TableCell className="text-[10px] py-1.5 font-mono">{p.size}</TableCell>
                  <TableCell className="text-[10px] py-1.5 font-mono">${p.entry_px?.toFixed(1) ?? "—"}</TableCell>
                  <TableCell className={`text-[10px] py-1.5 font-mono text-right ${(p.pnl ?? 0) >= 0 ? "text-green-500" : "text-red-500"}`}>
                    {(p.pnl ?? 0) >= 0 ? "+" : ""}${(p.pnl ?? 0).toFixed(4)}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
      {orders.length > 0 && (
        <div className="p-4 pb-4">
          <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">Orders ({orders.length})</p>
          <Table>
            <TableHeader>
              <TableRow className="border-border/50">
                <TableHead className="text-[9px] h-7">Coin</TableHead>
                <TableHead className="text-[9px] h-7">Side</TableHead>
                <TableHead className="text-[9px] h-7">Size</TableHead>
                <TableHead className="text-[9px] h-7">Limit</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {orders.map((o, i) => (
                <TableRow key={i} className="border-border/50">
                  <TableCell className="text-[10px] py-1.5">{o.coin}</TableCell>
                  <TableCell className="text-[10px] py-1.5">
                    <Badge variant="outline" className={`text-[9px] h-4 px-1.5 border-0 ${o.side === "B" ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}`}>
                      {o.side === "B" ? "BUY" : "SELL"}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-[10px] py-1.5 font-mono">{o.sz}</TableCell>
                  <TableCell className="text-[10px] py-1.5 font-mono">${o.limitPx ?? "—"}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
      {positions.length === 0 && orders.length === 0 && (
        <p className="text-xs text-muted-foreground text-center py-8">No open positions or orders</p>
      )}
    </Card>
  );
}
