/**
 * Allocation Table Component
 * Displays portfolio allocations in a table format
 */

import React from 'react';
import {
  ArrowTrendingUpIcon,
  ArrowTrendingDownIcon,
  MinusIcon,
} from '@heroicons/react/24/solid';
import type { PortfolioAllocation } from '../../../services/portfolio.service';

interface AllocationTableProps {
  allocations: PortfolioAllocation[];
  showDeviation?: boolean;
}

// Asset icons mapping
const ASSET_ICONS: Record<string, string> = {
  BTC: 'https://cryptologos.cc/logos/bitcoin-btc-logo.svg',
  ETH: 'https://cryptologos.cc/logos/ethereum-eth-logo.svg',
  USDT: 'https://cryptologos.cc/logos/tether-usdt-logo.svg',
  SOL: 'https://cryptologos.cc/logos/solana-sol-logo.svg',
  LINK: 'https://cryptologos.cc/logos/chainlink-link-logo.svg',
  AVAX: 'https://cryptologos.cc/logos/avalanche-avax-logo.svg',
};

export const AllocationTable: React.FC<AllocationTableProps> = ({
  allocations,
  showDeviation = true,
}) => {
  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr className="border-b border-gray-200 dark:border-gray-700">
            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">
              Activo
            </th>
            <th className="text-right py-3 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">
              Cantidad
            </th>
            <th className="text-right py-3 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">
              Valor
            </th>
            <th className="text-right py-3 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">
              % Actual
            </th>
            <th className="text-right py-3 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">
              % Objetivo
            </th>
            {showDeviation && (
              <th className="text-right py-3 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">
                Desviación
              </th>
            )}
            <th className="text-right py-3 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">
              P&L
            </th>
          </tr>
        </thead>
        <tbody>
          {allocations.map((alloc) => (
            <tr
              key={alloc.id}
              className="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50"
            >
              <td className="py-4 px-4">
                <div className="flex items-center gap-3">
                  {ASSET_ICONS[alloc.asset] ? (
                    <img
                      src={ASSET_ICONS[alloc.asset]}
                      alt={alloc.asset}
                      className="w-8 h-8"
                    />
                  ) : (
                    <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs font-bold">
                      {alloc.asset.slice(0, 2)}
                    </div>
                  )}
                  <span className="font-medium text-gray-900 dark:text-white">
                    {alloc.asset}
                  </span>
                </div>
              </td>
              <td className="text-right py-4 px-4 text-gray-900 dark:text-white">
                {alloc.quantity.toLocaleString(undefined, {
                  minimumFractionDigits: 4,
                  maximumFractionDigits: 8,
                })}
              </td>
              <td className="text-right py-4 px-4 text-gray-900 dark:text-white font-medium">
                ${alloc.value.toLocaleString(undefined, { minimumFractionDigits: 2 })}
              </td>
              <td className="text-right py-4 px-4 text-gray-900 dark:text-white">
                {alloc.currentPercent.toFixed(1)}%
              </td>
              <td className="text-right py-4 px-4 text-gray-500 dark:text-gray-400">
                {alloc.targetPercent.toFixed(1)}%
              </td>
              {showDeviation && (
                <td className="text-right py-4 px-4">
                  <div className="flex items-center justify-end gap-1">
                    {Math.abs(alloc.deviation) < 1 ? (
                      <MinusIcon className="w-4 h-4 text-gray-400" />
                    ) : alloc.deviation > 0 ? (
                      <ArrowTrendingUpIcon className="w-4 h-4 text-green-500" />
                    ) : (
                      <ArrowTrendingDownIcon className="w-4 h-4 text-red-500" />
                    )}
                    <span
                      className={`${
                        Math.abs(alloc.deviation) < 1
                          ? 'text-gray-400'
                          : alloc.deviation > 0
                          ? 'text-green-500'
                          : 'text-red-500'
                      }`}
                    >
                      {alloc.deviation > 0 ? '+' : ''}
                      {alloc.deviation.toFixed(1)}%
                    </span>
                  </div>
                </td>
              )}
              <td className="text-right py-4 px-4">
                <div className="flex flex-col items-end">
                  <span
                    className={`font-medium ${
                      alloc.pnl >= 0 ? 'text-green-500' : 'text-red-500'
                    }`}
                  >
                    {alloc.pnl >= 0 ? '+' : ''}${alloc.pnl.toLocaleString(undefined, {
                      minimumFractionDigits: 2,
                    })}
                  </span>
                  <span
                    className={`text-sm ${
                      alloc.pnlPercent >= 0 ? 'text-green-500' : 'text-red-500'
                    }`}
                  >
                    ({alloc.pnlPercent >= 0 ? '+' : ''}
                    {alloc.pnlPercent.toFixed(2)}%)
                  </span>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default AllocationTable;
