import { Badge } from "../ui/Badge";
import { RocketIndicator } from "../ui/RocketIndicator";
import { BadgeCell } from "./BadgeCell";
import { cn } from "../../utils/cn";

export function FlowTable({ data = [], loading = false }) {
  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-muted-foreground">Loading...</div>
      </div>
    );
  }

  if (data.length === 0) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-muted-foreground">No data available</div>
      </div>
    );
  }

  return (
    <div className="rounded-md border overflow-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b bg-muted/50">
            <th className="h-12 px-4 text-left align-middle font-medium">Symbol</th>
            <th className="h-12 px-4 text-left align-middle font-medium">Type</th>
            <th className="h-12 px-4 text-left align-middle font-medium">Strike</th>
            <th className="h-12 px-4 text-left align-middle font-medium">Expiry</th>
            <th className="h-12 px-4 text-left align-middle font-medium">Premium</th>
            <th className="h-12 px-4 text-left align-middle font-medium">Volume</th>
            <th className="h-12 px-4 text-left align-middle font-medium">Badges</th>
            <th className="h-12 px-4 text-left align-middle font-medium">Score</th>
            <th className="h-12 px-4 text-left align-middle font-medium">Time</th>
          </tr>
        </thead>
        <tbody>
          {data.map((flow, index) => (
            <tr
              key={flow.id || index}
              className="border-b transition-colors hover:bg-muted/50"
            >
              <td className="p-4 align-middle font-medium">{flow.symbol}</td>
              <td className="p-4 align-middle">
                <Badge
                  variant={flow.type === "CALL" ? "success" : "destructive"}
                >
                  {flow.type}
                </Badge>
              </td>
              <td className="p-4 align-middle">${flow.strike?.toFixed(2)}</td>
              <td className="p-4 align-middle text-xs">
                {flow.expiration
                  ? new Date(flow.expiration).toLocaleDateString()
                  : "N/A"}
              </td>
              <td className="p-4 align-middle">
                ${((flow.total_premium || 0) / 1000).toFixed(1)}k
              </td>
              <td className="p-4 align-middle">{flow.volume || 0}</td>
              <td className="p-4 align-middle">
                <BadgeCell badges={flow.badges} />
              </td>
              <td className="p-4 align-middle">
                <RocketIndicator
                  score={flow.rocketScore?.score || flow.rocket_score || 0}
                  tier={flow.rocketScore?.tier}
                  emoji={flow.rocketScore?.emoji}
                />
              </td>
              <td className="p-4 align-middle text-xs text-muted-foreground">
                {flow.created_at
                  ? new Date(flow.created_at).toLocaleTimeString()
                  : "N/A"}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

