import React, { useState, useEffect, useMemo } from 'react';
import { 
  LineChart, 
  Wallet, 
  ArrowUpRight, 
  ArrowDownRight, 
  Activity, 
  DollarSign, 
  PieChart, 
  RefreshCw, 
  AlertCircle,
  TrendingUp,
  CreditCard,
  Calendar
} from 'lucide-react';

// --- Composants UI ---

const Card = ({ children, className = '' }) => (
  <div className={`bg-white rounded-xl shadow-sm border border-slate-100 p-6 ${className}`}>
    {children}
  </div>
);

const Badge = ({ children, type = 'neutral' }) => {
  const colors = {
    success: 'bg-emerald-100 text-emerald-700',
    danger: 'bg-rose-100 text-rose-700',
    neutral: 'bg-slate-100 text-slate-700',
    warning: 'bg-amber-100 text-amber-800'
  };
  return (
    <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[type] || colors.neutral}`}>
      {children}
    </span>
  );
};

// --- Données Simulées (Fallback) ---

const MOCK_DATA = {
  portfolio: {
    totalValue: 124592.45,
    dayChange: 1245.30,
    dayChangePercent: 1.01,
    cashBalance: 15400.00
  },
  assets: [
    { id: 1, symbol: 'AAPL', name: 'Apple Inc.', quantity: 150, price: 178.35, change: 1.25, type: 'stock' },
    { id: 2, symbol: 'MSFT', name: 'Microsoft Corp.', quantity: 80, price: 332.40, change: -0.45, type: 'stock' },
    { id: 3, symbol: 'VTI', name: 'Vanguard Total Stock', quantity: 200, price: 225.10, change: 0.85, type: 'etf' },
    { id: 4, symbol: 'BTC', name: 'Bitcoin', quantity: 0.45, price: 42150.00, change: 2.30, type: 'crypto' },
    { id: 5, symbol: 'TSLA', name: 'Tesla Inc.', quantity: 45, price: 245.60, change: -1.20, type: 'stock' },
  ],
  history: Array.from({ length: 14 }).map((_, i) => ({
    date: new Date(Date.now() - (13 - i) * 24 * 60 * 60 * 1000).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' }),
    value: 120000 + Math.random() * 5000 + (i * 300)
  })),
  transactions: [
    { id: 101, type: 'buy', asset: 'VTI', amount: 2250.00, date: '2023-10-25', status: 'completed' },
    { id: 102, type: 'dividend', asset: 'MSFT', amount: 45.20, date: '2023-10-24', status: 'completed' },
    { id: 103, type: 'deposit', asset: 'CAD', amount: 1000.00, date: '2023-10-22', status: 'completed' },
    { id: 104, type: 'sell', asset: 'TSLA', amount: 1245.50, date: '2023-10-20', status: 'completed' },
  ]
};

// --- Composant Principal ---

export default function FinanceDashboard() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [activeTab, setActiveTab] = useState('overview');
  const [usingMock, setUsingMock] = useState(false);

  // Fonction pour charger les données (simule un appel API)
  const fetchData = async () => {
    setLoading(true);
    setError(null);
    
    try {
      // Tentative de connexion à l'API (Simulée ici pour échouer et passer au fallback)
      // Dans un cas réel, ce serait: const response = await fetch('https://finance.jeva.ca/api.php');
      
      // Simulation d'un échec réseau pour démontrer le fallback
      const shouldFail = true; 
      
      if (shouldFail) {
        throw new Error("API non trouvée (500)");
      }
      
      // Si succès (code inatteignable ici)
      // const result = await response.json();
      // setData(result);

    } catch (err) {
      console.warn("Mode API échoué, passage en mode Démo:", err.message);
      setUsingMock(true);
      // Délai artificiel pour l'UX
      await new Promise(resolve => setTimeout(resolve, 800));
      setData(MOCK_DATA);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  // Calculs dérivés
  const assetAllocation = useMemo(() => {
    if (!data) return [];
    const types = data.assets.reduce((acc, asset) => {
      const value = asset.quantity * asset.price;
      acc[asset.type] = (acc[asset.type] || 0) + value;
      return acc;
    }, {});
    
    const total = Object.values(types).reduce((a, b) => a + b, 0);
    return Object.entries(types).map(([name, value]) => ({
      name,
      value,
      percent: (value / total) * 100
    }));
  }, [data]);

  // Rendu du graphique simple en SVG
  const SimpleChart = ({ data, color = "#10b981" }) => {
    if (!data || data.length === 0) return null;
    
    const height = 160; // h-40
    const width = 100; // pourcentage
    
    const min = Math.min(...data.map(d => d.value));
    const max = Math.max(...data.map(d => d.value));
    const range = max - min;
    
    const points = data.map((d, i) => {
      const x = (i / (data.length - 1)) * 100;
      const y = 100 - ((d.value - min) / range) * 100;
      return `${x},${y}`;
    }).join(' ');

    return (
      <div className="h-40 w-full relative overflow-hidden">
        <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="w-full h-full">
          <defs>
            <linearGradient id="chartGradient" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={color} stopOpacity="0.2" />
              <stop offset="100%" stopColor={color} stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d={`M0,100 L${points} L100,100 Z`} fill="url(#chartGradient)" />
          <polyline points={points} fill="none" stroke={color} strokeWidth="2" vectorEffect="non-scaling-stroke" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        {/* Tooltip simulé au survol pourrait être ajouté ici */}
      </div>
    );
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center text-slate-400">
        <RefreshCw className="w-10 h-10 animate-spin mb-4 text-blue-600" />
        <p>Chargement du portefeuille...</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans">
      {/* Top Navigation */}
      <nav className="bg-white border-b border-slate-200 sticky top-0 z-10 px-4 sm:px-6 py-3 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">
            J
          </div>
          <span className="font-bold text-lg text-slate-800">Jeva Finance</span>
        </div>
        <div className="flex items-center gap-4">
          {usingMock && (
            <div className="hidden sm:flex items-center gap-1.5 px-3 py-1 bg-amber-50 text-amber-700 text-xs font-medium rounded-full border border-amber-100">
              <AlertCircle className="w-3.5 h-3.5" />
              Mode Démo (API Hors Ligne)
            </div>
          )}
          <button onClick={fetchData} className="p-2 hover:bg-slate-100 rounded-full transition-colors text-slate-500">
            <RefreshCw className="w-5 h-5" />
          </button>
          <div className="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center text-sm font-medium text-slate-600">
            JD
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
        
        {/* Header Stats */}
        <div className="mb-8">
          <h1 className="text-2xl font-bold text-slate-900 mb-6">Tableau de Bord</h1>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card className="bg-gradient-to-br from-blue-600 to-blue-700 text-white border-none shadow-lg shadow-blue-200">
              <div className="flex items-start justify-between mb-4">
                <div className="p-2 bg-white/10 rounded-lg">
                  <Wallet className="w-6 h-6 text-white" />
                </div>
                <Badge type="success" className="bg-white/20 text-white border border-white/20">
                  +{data.portfolio.dayChangePercent}%
                </Badge>
              </div>
              <div>
                <p className="text-blue-100 text-sm font-medium mb-1">Valeur Totale</p>
                <h2 className="text-3xl font-bold tracking-tight">
                  {data.portfolio.totalValue.toLocaleString('fr-FR', { style: 'currency', currency: 'CAD' })}
                </h2>
                <p className="text-blue-200 text-xs mt-2">
                  +{data.portfolio.dayChange.toLocaleString('fr-FR', { style: 'currency', currency: 'CAD' })} aujourd'hui
                </p>
              </div>
            </Card>

            <Card>
              <div className="flex items-center gap-2 mb-4 text-slate-500">
                <PieChart className="w-5 h-5" />
                <span className="text-sm font-medium">Répartition</span>
              </div>
              <div className="space-y-3">
                {assetAllocation.map((item) => (
                  <div key={item.name} className="flex items-center justify-between text-sm">
                    <div className="flex items-center gap-2">
                      <div className={`w-2 h-2 rounded-full ${item.name === 'stock' ? 'bg-blue-500' : item.name === 'crypto' ? 'bg-amber-500' : 'bg-emerald-500'}`} />
                      <span className="capitalize">{item.name === 'stock' ? 'Actions' : item.name === 'etf' ? 'FNBs' : 'Crypto'}</span>
                    </div>
                    <div className="flex items-center gap-4">
                      <span className="font-medium">{item.value.toLocaleString('fr-FR', { style: 'currency', currency: 'CAD', maximumFractionDigits: 0 })}</span>
                      <span className="text-slate-400 w-8 text-right">{item.percent.toFixed(0)}%</span>
                    </div>
                  </div>
                ))}
              </div>
            </Card>

            <Card>
              <div className="flex items-center gap-2 mb-4 text-slate-500">
                <Activity className="w-5 h-5" />
                <span className="text-sm font-medium">Performance (14J)</span>
              </div>
              <SimpleChart data={data.history} />
            </Card>
          </div>
        </div>

        {/* Main Sections Tab */}
        <div className="flex items-center gap-6 border-b border-slate-200 mb-6 overflow-x-auto">
          <button 
            onClick={() => setActiveTab('overview')}
            className={`pb-3 text-sm font-medium transition-colors whitespace-nowrap ${activeTab === 'overview' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-slate-500 hover:text-slate-700'}`}
          >
            Vue d'ensemble
          </button>
          <button 
            onClick={() => setActiveTab('holdings')}
            className={`pb-3 text-sm font-medium transition-colors whitespace-nowrap ${activeTab === 'holdings' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-slate-500 hover:text-slate-700'}`}
          >
            Actifs ({data.assets.length})
          </button>
          <button 
            onClick={() => setActiveTab('transactions')}
            className={`pb-3 text-sm font-medium transition-colors whitespace-nowrap ${activeTab === 'transactions' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-slate-500 hover:text-slate-700'}`}
          >
            Transactions
          </button>
        </div>

        {/* Content based on Tab */}
        {activeTab === 'overview' && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2 space-y-6">
              <h3 className="text-lg font-bold text-slate-800">Top Mouvements</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {data.assets.slice(0, 4).map(asset => (
                  <Card key={asset.id} className="flex items-center justify-between p-4 hover:shadow-md transition-shadow cursor-pointer">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 text-xs">
                        {asset.symbol[0]}
                      </div>
                      <div>
                        <div className="font-bold text-slate-800">{asset.symbol}</div>
                        <div className="text-xs text-slate-500">{asset.name}</div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-medium">{(asset.price).toLocaleString('fr-FR', { style: 'currency', currency: 'USD' })}</div>
                      <div className={`text-xs flex items-center justify-end gap-0.5 ${asset.change >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
                        {asset.change >= 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingUp className="w-3 h-3 transform rotate-180" />}
                        {asset.change > 0 ? '+' : ''}{asset.change}%
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            </div>

            <div className="lg:col-span-1">
              <h3 className="text-lg font-bold text-slate-800 mb-4">Activité Récente</h3>
              <Card className="p-0 overflow-hidden">
                <div className="divide-y divide-slate-100">
                  {data.transactions.map(tx => (
                    <div key={tx.id} className="p-4 flex items-center justify-between hover:bg-slate-50 transition-colors">
                      <div className="flex items-center gap-3">
                        <div className={`p-2 rounded-lg ${
                          tx.type === 'buy' ? 'bg-blue-100 text-blue-600' :
                          tx.type === 'sell' ? 'bg-purple-100 text-purple-600' :
                          tx.type === 'deposit' ? 'bg-emerald-100 text-emerald-600' :
                          'bg-amber-100 text-amber-600'
                        }`}>
                          {tx.type === 'deposit' ? <ArrowDownRight className="w-4 h-4" /> : 
                           tx.type === 'sell' ? <ArrowUpRight className="w-4 h-4" /> :
                           tx.type === 'buy' ? <Wallet className="w-4 h-4" /> :
                           <DollarSign className="w-4 h-4" />}
                        </div>
                        <div>
                          <div className="text-sm font-medium text-slate-900 capitalize">{tx.type} {tx.asset}</div>
                          <div className="text-xs text-slate-500">{new Date(tx.date).toLocaleDateString()}</div>
                        </div>
                      </div>
                      <span className={`text-sm font-medium ${tx.type === 'deposit' || tx.type === 'sell' || tx.type === 'dividend' ? 'text-emerald-600' : 'text-slate-900'}`}>
                        {tx.type === 'deposit' || tx.type === 'sell' || tx.type === 'dividend' ? '+' : '-'}
                        {tx.amount.toLocaleString('fr-FR', { style: 'currency', currency: 'CAD' })}
                      </span>
                    </div>
                  ))}
                </div>
                <div className="p-3 bg-slate-50 border-t border-slate-100 text-center">
                  <button className="text-sm text-blue-600 font-medium hover:text-blue-700">Voir tout l'historique</button>
                </div>
              </Card>
            </div>
          </div>
        )}

        {activeTab === 'holdings' && (
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-sm">
                <thead className="bg-slate-50 border-b border-slate-200">
                  <tr>
                    <th className="px-6 py-4 font-semibold text-slate-700">Actif</th>
                    <th className="px-6 py-4 font-semibold text-slate-700 text-right">Prix</th>
                    <th className="px-6 py-4 font-semibold text-slate-700 text-right">Quantité</th>
                    <th className="px-6 py-4 font-semibold text-slate-700 text-right">Valeur Totale</th>
                    <th className="px-6 py-4 font-semibold text-slate-700 text-right">Variation (24h)</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {data.assets.map((asset) => (
                    <tr key={asset.id} className="hover:bg-slate-50 transition-colors">
                      <td className="px-6 py-4">
                        <div className="flex items-center gap-3">
                          <div className="w-8 h-8 rounded bg-slate-100 flex items-center justify-center font-bold text-slate-600 text-xs">
                            {asset.symbol[0]}
                          </div>
                          <div>
                            <div className="font-bold text-slate-900">{asset.symbol}</div>
                            <div className="text-xs text-slate-500">{asset.name}</div>
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4 text-right font-medium text-slate-600">
                        {asset.price.toLocaleString('fr-FR', { style: 'currency', currency: 'USD' })}
                      </td>
                      <td className="px-6 py-4 text-right text-slate-600">
                        {asset.quantity}
                      </td>
                      <td className="px-6 py-4 text-right font-bold text-slate-900">
                        {(asset.price * asset.quantity).toLocaleString('fr-FR', { style: 'currency', currency: 'CAD' })}
                      </td>
                      <td className="px-6 py-4 text-right">
                        <Badge type={asset.change >= 0 ? 'success' : 'danger'}>
                          {asset.change > 0 ? '+' : ''}{asset.change}%
                        </Badge>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}