"use client";
import { motion } from "framer-motion";
import { TrendingUp, TrendingDown, Minus } from "lucide-react";
import { StockEntry } from "@/lib/types";
import { getStockPnL, formatCurrency, formatPercent } from "@/lib/portfolio";

interface StockTableProps {
  stocks: StockEntry[];
}

export default function StockTable({ stocks }: StockTableProps) {
  return (
    <div className="w-full overflow-x-auto">
      <table className="w-full border-collapse">
        <thead>
          <tr>
            {["#", "Stock", "Buy Price", "Qty", "Invested", "Current", "P&L", "Return", "Date"].map((h, i) => (
              <th
                key={h}
                className="text-left pb-3 text-phi-xs font-data uppercase tracking-widest"
                style={{
                  color: "#7A9ABF",
                  borderBottom: "1px solid rgba(29, 111, 235, 0.15)",
                  paddingRight: i === 0 ? "12px" : "16px",
                  paddingLeft: i === 0 ? "0" : "4px",
                  whiteSpace: "nowrap",
                }}
              >
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {stocks.map((stock, idx) => {
            const { pnl, pnlPercent, invested, current } = getStockPnL(stock);
            const isProfit = pnl >= 0;
            const isNeutral = Math.abs(pnlPercent) < 0.01;
            const pnlColor = isNeutral ? "#7A9ABF" : isProfit ? "#00C875" : "#F03E3E";
            const Icon = isNeutral ? Minus : isProfit ? TrendingUp : TrendingDown;

            return (
              <motion.tr
                key={stock.id ?? `${stock.stock_name}-${idx}`}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.4, delay: idx * 0.07, ease: [0.22, 1, 0.36, 1] }}
                className="group"
                style={{ borderBottom: "1px solid rgba(29, 111, 235, 0.07)" }}
              >
                <td className="py-4 pr-3">
                  <span className="font-data text-phi-xs" style={{ color: "rgba(29, 111, 235, 0.5)" }}>
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                </td>
                <td className="py-4 pr-4">
                  <div className="flex items-center gap-2">
                    <div
                      className="w-8 h-8 rounded-phi flex items-center justify-center font-display font-bold text-phi-xs flex-shrink-0"
                      style={{
                        background: `rgba(29, 111, 235, ${0.1 + (idx % 5) * 0.04})`,
                        color: "#93C5FD",
                        border: "1px solid rgba(29, 111, 235, 0.2)",
                      }}
                    >
                      {stock.stock_name.slice(0, 2).toUpperCase()}
                    </div>
                    <p className="font-display font-semibold text-phi-sm whitespace-nowrap" style={{ color: "#EEF5FF" }}>
                      {stock.stock_name}
                    </p>
                  </div>
                </td>
                <td className="py-4 pr-4">
                  <span className="font-data text-phi-sm" style={{ color: "#C8D8F0" }}>
                    {formatCurrency(stock.buy_price)}
                  </span>
                </td>
                <td className="py-4 pr-4">
                  <span className="font-data text-phi-sm" style={{ color: "#C8D8F0" }}>
                    {stock.quantity.toLocaleString()}
                  </span>
                </td>
                <td className="py-4 pr-4">
                  <span className="font-data text-phi-sm" style={{ color: "#7A9ABF" }}>
                    {formatCurrency(invested, true)}
                  </span>
                </td>
                <td className="py-4 pr-4">
                  <span className="font-data text-phi-sm font-medium" style={{ color: "#EEF5FF" }}>
                    {formatCurrency(current, true)}
                  </span>
                </td>
                <td className="py-4 pr-4">
                  <span className="font-data text-phi-sm font-semibold" style={{ color: pnlColor }}>
                    {pnl >= 0 ? "+" : ""}{formatCurrency(pnl, true)}
                  </span>
                </td>
                <td className="py-4 pr-4">
                  <div className="flex items-center gap-1.5">
                    <Icon size={13} style={{ color: pnlColor, flexShrink: 0 }} />
                    <span className="font-data text-phi-sm font-semibold" style={{ color: pnlColor }}>
                      {formatPercent(pnlPercent)}
                    </span>
                  </div>
                </td>
                <td className="py-4">
                  <span className="font-data text-phi-xs" style={{ color: "#7A9ABF" }}>
                    {stock.date}
                  </span>
                </td>
              </motion.tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}