/**
 * Account Detail Page
 * Shows detailed information about a specific investment account
 */

import React, { useEffect, useState } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { ArrowLeft, TrendingUp, TrendingDown, Calendar, Clock, DollarSign, AlertCircle } from 'lucide-react';
import investmentService, { AccountDetail as AccountDetailType, Transaction, Distribution } from '../../../services/investment.service';
import { DepositForm } from '../components/DepositForm';
import { WithdrawForm } from '../components/WithdrawForm';

// ============================================================================
// Types
// ============================================================================

type TabType = 'overview' | 'transactions' | 'distributions' | 'deposit' | 'withdraw';

// ============================================================================
// Subcomponents
// ============================================================================

interface StatCardProps {
  label: string;
  value: string;
  subValue?: string;
  icon: React.ReactNode;
  trend?: 'up' | 'down' | 'neutral';
}

const StatCard: React.FC<StatCardProps> = ({ label, value, subValue, icon, trend }) => {
  const trendColors = {
    up: 'text-green-500',
    down: 'text-red-500',
    neutral: 'text-gray-500',
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-lg">
      <div className="flex items-start justify-between">
        <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">{icon}</div>
        {trend && (
          <span className={trendColors[trend]}>
            {trend === 'up' ? <TrendingUp size={20} /> : trend === 'down' ? <TrendingDown size={20} /> : null}
          </span>
        )}
      </div>
      <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">{label}</p>
      <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
      {subValue && <p className={`text-sm ${trend ? trendColors[trend] : 'text-gray-500'}`}>{subValue}</p>}
    </div>
  );
};

interface TransactionRowProps {
  transaction: Transaction;
}

const TransactionRow: React.FC<TransactionRowProps> = ({ transaction }) => {
  const typeIcons: Record<string, string> = {
    deposit: '📥',
    withdrawal: '📤',
    distribution: '💰',
    fee: '📋',
    adjustment: '🔄',
  };

  const statusColors: Record<string, string> = {
    pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
    completed: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
    failed: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
    cancelled: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400',
  };

  const isCredit = ['deposit', 'distribution'].includes(transaction.type);

  return (
    <div className="flex items-center justify-between py-4 border-b border-gray-200 dark:border-gray-700 last:border-0">
      <div className="flex items-center gap-4">
        <span className="text-2xl">{typeIcons[transaction.type] || '📋'}</span>
        <div>
          <p className="font-medium text-gray-900 dark:text-white capitalize">
            {transaction.type.replace('_', ' ')}
          </p>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            {new Date(transaction.createdAt).toLocaleDateString()} {new Date(transaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
          </p>
        </div>
      </div>
      <div className="text-right">
        <p className={`font-bold ${isCredit ? 'text-green-500' : 'text-red-500'}`}>
          {isCredit ? '+' : '-'}${Math.abs(transaction.amount).toLocaleString(undefined, { minimumFractionDigits: 2 })}
        </p>
        <span className={`text-xs px-2 py-1 rounded-full ${statusColors[transaction.status]}`}>
          {transaction.status}
        </span>
      </div>
    </div>
  );
};

interface DistributionRowProps {
  distribution: Distribution;
}

const DistributionRow: React.FC<DistributionRowProps> = ({ distribution }) => {
  return (
    <div className="flex items-center justify-between py-4 border-b border-gray-200 dark:border-gray-700 last:border-0">
      <div className="flex items-center gap-4">
        <span className="text-2xl">💰</span>
        <div>
          <p className="font-medium text-gray-900 dark:text-white">
            Distribución de Rendimientos
          </p>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            {new Date(distribution.distributedAt).toLocaleDateString()} - Tasa: {(distribution.rate * 100).toFixed(4)}%
          </p>
        </div>
      </div>
      <div className="text-right">
        <p className="font-bold text-green-500">
          +${distribution.amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
        </p>
        <p className="text-xs text-gray-500 dark:text-gray-400">
          Balance: ${distribution.balanceAfter.toLocaleString(undefined, { minimumFractionDigits: 2 })}
        </p>
      </div>
    </div>
  );
};

// ============================================================================
// Performance Chart (Simple Canvas)
// ============================================================================

interface PerformanceChartProps {
  data: Array<{ date: string; balance: number; pnl: number }>;
}

const PerformanceChart: React.FC<PerformanceChartProps> = ({ data }) => {
  const canvasRef = React.useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas || data.length === 0) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const width = canvas.width;
    const height = canvas.height;
    const padding = { top: 20, right: 20, bottom: 30, left: 60 };
    const chartWidth = width - padding.left - padding.right;
    const chartHeight = height - padding.top - padding.bottom;

    // Clear canvas
    ctx.clearRect(0, 0, width, height);

    // Calculate min/max
    const balances = data.map(d => d.balance);
    const minBalance = Math.min(...balances) * 0.99;
    const maxBalance = Math.max(...balances) * 1.01;

    // Draw grid lines
    ctx.strokeStyle = '#374151';
    ctx.lineWidth = 0.5;
    for (let i = 0; i <= 4; i++) {
      const y = padding.top + (chartHeight / 4) * i;
      ctx.beginPath();
      ctx.moveTo(padding.left, y);
      ctx.lineTo(width - padding.right, y);
      ctx.stroke();

      // Y-axis labels
      const value = maxBalance - ((maxBalance - minBalance) / 4) * i;
      ctx.fillStyle = '#9CA3AF';
      ctx.font = '12px system-ui';
      ctx.textAlign = 'right';
      ctx.fillText(`$${value.toLocaleString(undefined, { maximumFractionDigits: 0 })}`, padding.left - 10, y + 4);
    }

    // Draw line
    ctx.beginPath();
    ctx.strokeStyle = '#3B82F6';
    ctx.lineWidth = 2;

    data.forEach((point, i) => {
      const x = padding.left + (chartWidth / (data.length - 1)) * i;
      const y = padding.top + chartHeight - ((point.balance - minBalance) / (maxBalance - minBalance)) * chartHeight;

      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    });
    ctx.stroke();

    // Draw gradient fill
    const gradient = ctx.createLinearGradient(0, padding.top, 0, height - padding.bottom);
    gradient.addColorStop(0, 'rgba(59, 130, 246, 0.3)');
    gradient.addColorStop(1, 'rgba(59, 130, 246, 0)');

    ctx.beginPath();
    data.forEach((point, i) => {
      const x = padding.left + (chartWidth / (data.length - 1)) * i;
      const y = padding.top + chartHeight - ((point.balance - minBalance) / (maxBalance - minBalance)) * chartHeight;
      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    });
    ctx.lineTo(padding.left + chartWidth, height - padding.bottom);
    ctx.lineTo(padding.left, height - padding.bottom);
    ctx.closePath();
    ctx.fillStyle = gradient;
    ctx.fill();

    // X-axis labels (show a few dates)
    const labelIndices = [0, Math.floor(data.length / 2), data.length - 1];
    ctx.fillStyle = '#9CA3AF';
    ctx.font = '11px system-ui';
    ctx.textAlign = 'center';
    labelIndices.forEach(i => {
      if (data[i]) {
        const x = padding.left + (chartWidth / (data.length - 1)) * i;
        const date = new Date(data[i].date);
        ctx.fillText(date.toLocaleDateString('es-ES', { month: 'short', day: 'numeric' }), x, height - 10);
      }
    });
  }, [data]);

  return (
    <canvas
      ref={canvasRef}
      width={800}
      height={300}
      className="w-full h-auto"
    />
  );
};

// ============================================================================
// Main Component
// ============================================================================

export const AccountDetail: React.FC = () => {
  const { accountId } = useParams<{ accountId: string }>();
  const navigate = useNavigate();

  const [account, setAccount] = useState<AccountDetailType | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<TabType>('overview');
  const [allTransactions, setAllTransactions] = useState<Transaction[]>([]);
  const [loadingMore, setLoadingMore] = useState(false);

  useEffect(() => {
    if (accountId) {
      loadAccount();
    }
  }, [accountId]);

  const loadAccount = async () => {
    if (!accountId) return;

    try {
      setLoading(true);
      setError(null);
      const data = await investmentService.getAccountById(accountId);
      setAccount(data);
      setAllTransactions(data.recentTransactions || []);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Error loading account');
    } finally {
      setLoading(false);
    }
  };

  const loadMoreTransactions = async () => {
    if (!accountId || loadingMore) return;

    try {
      setLoadingMore(true);
      const { transactions } = await investmentService.getTransactions(accountId, {
        limit: 20,
        offset: allTransactions.length,
      });
      setAllTransactions(prev => [...prev, ...transactions]);
    } catch (err) {
      console.error('Error loading transactions:', err);
    } finally {
      setLoadingMore(false);
    }
  };

  const handleDepositSuccess = () => {
    setActiveTab('overview');
    loadAccount();
  };

  const handleWithdrawSuccess = () => {
    setActiveTab('overview');
    loadAccount();
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-96">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  if (error || !account) {
    return (
      <div className="max-w-4xl mx-auto px-4 py-8">
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-6 text-center">
          <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
          <h2 className="text-xl font-bold text-red-700 dark:text-red-400 mb-2">
            Error al cargar la cuenta
          </h2>
          <p className="text-red-600 dark:text-red-300 mb-4">{error || 'Cuenta no encontrada'}</p>
          <button
            onClick={() => navigate('/investment/portfolio')}
            className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
          >
            Volver al Portfolio
          </button>
        </div>
      </div>
    );
  }

  const totalReturn = account.balance - account.totalDeposited + account.totalWithdrawn;
  const returnPercent = account.totalDeposited > 0 ? (totalReturn / account.totalDeposited) * 100 : 0;

  const tabs: { key: TabType; label: string }[] = [
    { key: 'overview', label: 'Resumen' },
    { key: 'transactions', label: 'Transacciones' },
    { key: 'distributions', label: 'Distribuciones' },
    { key: 'deposit', label: 'Depositar' },
    { key: 'withdraw', label: 'Retirar' },
  ];

  return (
    <div className="max-w-6xl mx-auto px-4 py-8">
      {/* Header */}
      <div className="flex items-center gap-4 mb-8">
        <button
          onClick={() => navigate('/investment/portfolio')}
          className="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
        >
          <ArrowLeft className="w-5 h-5 text-gray-600 dark:text-gray-400" />
        </button>
        <div className="flex-1">
          <div className="flex items-center gap-3">
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
              {account.product.name}
            </h1>
            <span className={`px-3 py-1 rounded-full text-sm font-medium ${
              account.status === 'active'
                ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
                : account.status === 'suspended'
                ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
                : 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400'
            }`}>
              {account.status === 'active' ? 'Activa' : account.status === 'suspended' ? 'Suspendida' : 'Cerrada'}
            </span>
          </div>
          <p className="text-gray-500 dark:text-gray-400">
            Cuenta #{account.accountNumber} - Desde {new Date(account.openedAt).toLocaleDateString()}
          </p>
        </div>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <StatCard
          label="Balance Actual"
          value={`$${account.balance.toLocaleString(undefined, { minimumFractionDigits: 2 })}`}
          icon={<DollarSign className="w-5 h-5 text-blue-600" />}
        />
        <StatCard
          label="Total Invertido"
          value={`$${account.totalDeposited.toLocaleString(undefined, { minimumFractionDigits: 2 })}`}
          icon={<TrendingUp className="w-5 h-5 text-purple-600" />}
        />
        <StatCard
          label="Ganancias"
          value={`$${Math.abs(totalReturn).toLocaleString(undefined, { minimumFractionDigits: 2 })}`}
          subValue={`${returnPercent >= 0 ? '+' : ''}${returnPercent.toFixed(2)}%`}
          icon={<TrendingUp className="w-5 h-5 text-green-600" />}
          trend={totalReturn >= 0 ? 'up' : 'down'}
        />
        <StatCard
          label="Total Retirado"
          value={`$${account.totalWithdrawn.toLocaleString(undefined, { minimumFractionDigits: 2 })}`}
          icon={<Clock className="w-5 h-5 text-orange-600" />}
        />
      </div>

      {/* Tabs */}
      <div className="border-b border-gray-200 dark:border-gray-700 mb-6">
        <div className="flex gap-1 overflow-x-auto">
          {tabs.map(tab => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                activeTab === tab.key
                  ? 'border-blue-600 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* Tab Content */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        {activeTab === 'overview' && (
          <div className="space-y-8">
            {/* Performance Chart */}
            {account.performanceHistory && account.performanceHistory.length > 0 && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                  Rendimiento Histórico
                </h3>
                <PerformanceChart data={account.performanceHistory} />
              </div>
            )}

            {/* Account Info */}
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                  Información de la Cuenta
                </h3>
                <dl className="space-y-3">
                  <div className="flex justify-between">
                    <dt className="text-gray-500 dark:text-gray-400">Producto</dt>
                    <dd className="font-medium text-gray-900 dark:text-white">{account.product.name}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-gray-500 dark:text-gray-400">Perfil de Riesgo</dt>
                    <dd className="font-medium text-gray-900 dark:text-white capitalize">{account.product.riskProfile}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-gray-500 dark:text-gray-400">Inversión Inicial</dt>
                    <dd className="font-medium text-gray-900 dark:text-white">
                      ${account.initialInvestment.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-gray-500 dark:text-gray-400">Fecha de Apertura</dt>
                    <dd className="font-medium text-gray-900 dark:text-white">
                      {new Date(account.openedAt).toLocaleDateString()}
                    </dd>
                  </div>
                </dl>
              </div>

              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                  Últimas Transacciones
                </h3>
                {account.recentTransactions && account.recentTransactions.length > 0 ? (
                  <div>
                    {account.recentTransactions.slice(0, 5).map(tx => (
                      <TransactionRow key={tx.id} transaction={tx} />
                    ))}
                    {account.recentTransactions.length > 5 && (
                      <button
                        onClick={() => setActiveTab('transactions')}
                        className="w-full mt-4 text-center text-blue-600 hover:text-blue-700 text-sm font-medium"
                      >
                        Ver todas las transacciones
                      </button>
                    )}
                  </div>
                ) : (
                  <p className="text-gray-500 dark:text-gray-400 text-center py-8">
                    No hay transacciones recientes
                  </p>
                )}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'transactions' && (
          <div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
              Historial de Transacciones
            </h3>
            {allTransactions.length > 0 ? (
              <div>
                {allTransactions.map(tx => (
                  <TransactionRow key={tx.id} transaction={tx} />
                ))}
                <button
                  onClick={loadMoreTransactions}
                  disabled={loadingMore}
                  className="w-full mt-4 py-3 text-center text-blue-600 hover:text-blue-700 text-sm font-medium disabled:opacity-50"
                >
                  {loadingMore ? 'Cargando...' : 'Cargar más'}
                </button>
              </div>
            ) : (
              <p className="text-gray-500 dark:text-gray-400 text-center py-12">
                No hay transacciones registradas
              </p>
            )}
          </div>
        )}

        {activeTab === 'distributions' && (
          <div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
              Historial de Distribuciones
            </h3>
            {account.recentDistributions && account.recentDistributions.length > 0 ? (
              <div>
                {account.recentDistributions.map(dist => (
                  <DistributionRow key={dist.id} distribution={dist} />
                ))}
              </div>
            ) : (
              <p className="text-gray-500 dark:text-gray-400 text-center py-12">
                No hay distribuciones registradas
              </p>
            )}
          </div>
        )}

        {activeTab === 'deposit' && (
          <div className="max-w-lg mx-auto">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
              Depositar Fondos
            </h3>
            <DepositForm
              accounts={[
                {
                  id: account.id,
                  accountNumber: account.accountNumber,
                  productName: account.product.name,
                  currentBalance: account.balance,
                },
              ]}
              onSuccess={handleDepositSuccess}
              onCancel={() => setActiveTab('overview')}
            />
          </div>
        )}

        {activeTab === 'withdraw' && (
          <div className="max-w-lg mx-auto">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
              Solicitar Retiro
            </h3>
            <WithdrawForm
              accounts={[
                {
                  id: account.id,
                  accountNumber: account.accountNumber,
                  productName: account.product.name,
                  currentBalance: account.balance,
                },
              ]}
              onSuccess={handleWithdrawSuccess}
              onCancel={() => setActiveTab('overview')}
            />
          </div>
        )}
      </div>

      {/* Quick Actions */}
      {activeTab === 'overview' && account.status === 'active' && (
        <div className="mt-6 flex flex-wrap gap-4">
          <button
            onClick={() => setActiveTab('deposit')}
            className="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors"
          >
            Depositar
          </button>
          <button
            onClick={() => setActiveTab('withdraw')}
            className="px-6 py-3 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white font-medium rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
          >
            Retirar
          </button>
          <Link
            to="/investment/products"
            className="px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
          >
            Ver Productos
          </Link>
        </div>
      )}
    </div>
  );
};

export default AccountDetail;
