import React, { useState, useEffect, useMemo, useCallback } from 'react';
import ReactDOM from 'react-dom/client';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { GoogleGenAI } from "@google/genai";

// --- TYPES ---
interface RiskSettings {
  dailyLossLimit: number;
  maxTradesPerDay: number;
  tradingEnabled: boolean;
}

interface Trade {
  id: string;
  symbol: string;
  type: 'BUY' | 'SELL';
  pnl: number;
  timestamp: Date;
}

enum AppStatus {
  OPERATIONAL = 'OPERATIONAL',
  LOCKED = 'LOCKED',
  WARNING = 'WARNING'
}

// --- AI SERVICE ---
const getRiskCoachFeedback = async (stats: any, settings: RiskSettings, trades: Trade[]) => {
  if (!process.env.API_KEY) return "API ключ не настроен. Проверьте настройки окружения.";
  
  const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
  const prompt = `
    Ты - профессиональный риск-менеджер в трейдинге. 
    Твоя задача: проанализировать текущую ситуацию и дать короткий, жесткий, но полезный совет (макс 100 слов).
    
    Данные:
    - P&L сегодня: ${stats.todayPnl}$
    - Лимит потерь: ${settings.dailyLossLimit}$
    - Всего сделок: ${stats.totalTrades} из ${settings.maxTradesPerDay} разрешенных.
    
    Инструкция:
    1. Если лимит пробит - потребуй немедленно закрыть терминал.
    2. Если убыток > 75% лимита - предупреди об опасности.
    3. Если все ок - напомни о дисциплине.
    4. Отвечай на РУССКОМ языке.
  `;

  try {
    const response = await ai.models.generateContent({
      model: "gemini-3-flash-preview",
      contents: prompt,
    });
    return response.text;
  } catch (error) {
    return "Соблюдайте дисциплину и следите за стоп-лоссами.";
  }
};

// --- MAIN APP COMPONENT ---
const App: React.FC = () => {
  const [settings, setSettings] = useState<RiskSettings>(() => {
    const saved = localStorage.getItem('nexus_settings');
    return saved ? JSON.parse(saved) : {
      dailyLossLimit: 500,
      maxTradesPerDay: 10,
      tradingEnabled: true
    };
  });

  const [trades, setTrades] = useState<Trade[]>([]);
  const [aiFeedback, setAiFeedback] = useState<string>("Анализирую вашу торговую сессию...");
  const [isAiLoading, setIsAiLoading] = useState(false);
  const [activeTab, setActiveTab] = useState<'dashboard' | 'settings'>('dashboard');

  useEffect(() => {
    localStorage.setItem('nexus_settings', JSON.stringify(settings));
  }, [settings]);

  // Расчет статистики
  const stats = useMemo(() => {
    const today = new Date().toDateString();
    const todayTrades = trades.filter(t => new Date(t.timestamp).toDateString() === today);
    const todayPnl = todayTrades.reduce((acc, curr) => acc + curr.pnl, 0);
    const wins = todayTrades.filter(t => t.pnl > 0).length;
    
    return {
      todayPnl,
      totalTrades: todayTrades.length,
      winRate: todayTrades.length > 0 ? Math.round((wins / todayTrades.length) * 100) : 0,
    };
  }, [trades]);

  const appStatus = useMemo(() => {
    if (stats.todayPnl <= -settings.dailyLossLimit || stats.totalTrades >= settings.maxTradesPerDay) {
      return AppStatus.LOCKED;
    }
    if (stats.todayPnl <= -(settings.dailyLossLimit * 0.75)) {
      return AppStatus.WARNING;
    }
    return AppStatus.OPERATIONAL;
  }, [stats, settings]);

  const updateAiAdvice = useCallback(async () => {
    setIsAiLoading(true);
    const feedback = await getRiskCoachFeedback(stats, settings, trades);
    setAiFeedback(feedback || "Нет данных");
    setIsAiLoading(false);
  }, [stats, settings, trades]);

  useEffect(() => {
    updateAiAdvice();
  }, [appStatus]);

  const handleSimulateTrade = () => {
    if (appStatus === AppStatus.LOCKED) return;
    const pnl = Math.floor(Math.random() * 500) - 350; // Имитация прибыли/убытка
    const newTrade: Trade = {
      id: Date.now().toString(),
      symbol: ['BTC/USDT', 'ETH/USDT', 'SOL/USDT'][Math.floor(Math.random() * 3)],
      type: Math.random() > 0.5 ? 'BUY' : 'SELL',
      pnl,
      timestamp: new Date()
    };
    setTrades(prev => [newTrade, ...prev]);
  };

  const chartData = useMemo(() => {
    let cumulative = 0;
    return [...trades].reverse().map((t, i) => {
      cumulative += t.pnl;
      return { name: i + 1, pnl: cumulative };
    });
  }, [trades]);

  return (
    <div className="min-h-screen flex">
      {/* Sidebar */}
      <aside className="w-20 lg:w-64 bg-zinc-900 border-r border-zinc-800 flex flex-col py-8 fixed h-full z-50">
        <div className="px-6 mb-10 flex items-center gap-3">
          <div className="w-10 h-10 bg-emerald-500 rounded-xl flex items-center justify-center text-zinc-950 glow-emerald">
            <i className="fas fa-shield-halved text-xl"></i>
          </div>
          <span className="hidden lg:block font-bold text-xl tracking-tighter">NEXUS</span>
        </div>

        <nav className="flex-1 px-4 space-y-2">
          <button 
            onClick={() => setActiveTab('dashboard')}
            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition-all ${activeTab === 'dashboard' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-zinc-500 hover:text-zinc-200'}`}
          >
            <i className="fas fa-grid-2 text-lg"></i>
            <span className="hidden lg:block font-medium">Дашборд</span>
          </button>
          <button 
            onClick={() => setActiveTab('settings')}
            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition-all ${activeTab === 'settings' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-zinc-500 hover:text-zinc-200'}`}
          >
            <i className="fas fa-sliders text-lg"></i>
            <span className="hidden lg:block font-medium">Риск-менеджмент</span>
          </button>
        </nav>

        <div className="px-4 mt-auto">
          <div className={`p-4 rounded-xl border ${appStatus === AppStatus.LOCKED ? 'bg-rose-500/10 border-rose-500/20 text-rose-500' : 'bg-emerald-500/10 border-emerald-500/20 text-emerald-500'}`}>
             <div className="flex items-center gap-2 mb-1">
                <div className={`w-2 h-2 rounded-full animate-pulse ${appStatus === AppStatus.LOCKED ? 'bg-rose-500' : 'bg-emerald-500'}`}></div>
                <span className="text-[10px] font-bold uppercase tracking-widest">{appStatus === AppStatus.LOCKED ? 'LOCKED' : 'ACTIVE'}</span>
             </div>
             <p className="text-[10px] opacity-60 hidden lg:block">Nexus Sentinel v1.0</p>
          </div>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 ml-20 lg:ml-64 p-6 lg:p-10">
        <div className="max-w-6xl mx-auto">
          
          <header className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4">
            <div>
              <h1 className="text-3xl font-bold tracking-tight">{activeTab === 'dashboard' ? 'Мониторинг' : 'Настройки'}</h1>
              <p className="text-zinc-500">Система контроля просадки в реальном времени</p>
            </div>
            {activeTab === 'dashboard' && (
              <button 
                onClick={handleSimulateTrade}
                disabled={appStatus === AppStatus.LOCKED}
                className={`px-8 py-3 rounded-xl font-bold transition-all flex items-center gap-2 ${appStatus === AppStatus.LOCKED ? 'bg-zinc-800 text-zinc-600 cursor-not-allowed' : 'bg-emerald-500 text-zinc-950 hover:bg-emerald-400 hover:scale-105 active:scale-95 glow-emerald'}`}
              >
                <i className="fas fa-plus"></i>
                Новая сделка
              </button>
            )}
          </header>

          {activeTab === 'dashboard' ? (
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
              
              {/* Stats & Charts */}
              <div className="lg:col-span-8 space-y-6">
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                  <div className="glass p-6 rounded-2xl">
                    <span className="text-xs text-zinc-500 uppercase font-bold tracking-wider">P&L Сегодня</span>
                    <div className={`text-2xl font-bold mono mt-1 ${stats.todayPnl >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
                      {stats.todayPnl > 0 ? '+' : ''}{stats.todayPnl}$
                    </div>
                  </div>
                  <div className="glass p-6 rounded-2xl">
                    <span className="text-xs text-zinc-500 uppercase font-bold tracking-wider">Сделок</span>
                    <div className="text-2xl font-bold mono mt-1 text-zinc-100">{stats.totalTrades} / {settings.maxTradesPerDay}</div>
                  </div>
                  <div className="glass p-6 rounded-2xl">
                    <span className="text-xs text-zinc-500 uppercase font-bold tracking-wider">Win Rate</span>
                    <div className="text-2xl font-bold mono mt-1 text-sky-400">{stats.winRate}%</div>
                  </div>
                </div>

                <div className="glass p-6 rounded-2xl h-[400px]">
                   <h3 className="font-bold text-lg mb-6">График доходности</h3>
                   <ResponsiveContainer width="100%" height="100%">
                      <AreaChart data={chartData}>
                        <defs>
                          <linearGradient id="chartColor" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="5%" stopColor="#10b981" stopOpacity={0.2}/>
                            <stop offset="95%" stopColor="#10b981" stopOpacity={0}/>
                          </linearGradient>
                        </defs>
                        <CartesianGrid strokeDasharray="3 3" stroke="#1f1f23" vertical={false} />
                        <XAxis dataKey="name" hide />
                        <YAxis stroke="#52525b" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(v) => `$${v}`} />
                        <Tooltip contentStyle={{ backgroundColor: '#18181b', border: 'none', borderRadius: '12px', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.5)' }} />
                        <Area type="monotone" dataKey="pnl" stroke="#10b981" strokeWidth={2} fillOpacity={1} fill="url(#chartColor)" />
                      </AreaChart>
                   </ResponsiveContainer>
                </div>

                <div className="glass rounded-2xl overflow-hidden">
                  <table className="w-full text-left">
                    <thead className="bg-zinc-900/50">
                      <tr className="text-zinc-500 text-xs uppercase font-bold">
                        <th className="px-6 py-4">Актив</th>
                        <th className="px-6 py-4">Тип</th>
                        <th className="px-6 py-4">Результат</th>
                        <th className="px-6 py-4">Время</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-zinc-800/50">
                      {trades.length === 0 && (
                        <tr><td colSpan={4} className="px-6 py-10 text-center text-zinc-600">Сделок пока нет. Нажмите "Новая сделка".</td></tr>
                      )}
                      {trades.map(t => (
                        <tr key={t.id} className="hover:bg-zinc-800/30 transition-colors">
                          <td className="px-6 py-4 font-bold mono">{t.symbol}</td>
                          <td className="px-6 py-4">
                            <span className={`px-2 py-1 rounded-md text-[10px] font-bold ${t.type === 'BUY' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-rose-500/10 text-rose-500'}`}>{t.type}</span>
                          </td>
                          <td className={`px-6 py-4 font-bold mono ${t.pnl >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
                            {t.pnl > 0 ? '+' : ''}{t.pnl}$
                          </td>
                          <td className="px-6 py-4 text-xs text-zinc-500">{t.timestamp.toLocaleTimeString()}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>

              {/* AI & Status Sidebar */}
              <div className="lg:col-span-4 space-y-6">
                
                {/* Status Box */}
                <div className={`p-6 rounded-2xl border-2 transition-all duration-500 ${appStatus === AppStatus.LOCKED ? 'border-rose-500 bg-rose-500/5 glow-rose' : appStatus === AppStatus.WARNING ? 'border-amber-500 bg-amber-500/5' : 'border-emerald-500/20 bg-emerald-500/5'}`}>
                  <div className="flex items-center gap-4 mb-4">
                    <div className={`w-12 h-12 rounded-xl flex items-center justify-center text-xl ${appStatus === AppStatus.LOCKED ? 'bg-rose-500 text-zinc-950' : 'bg-emerald-500 text-zinc-950'}`}>
                      <i className={`fas ${appStatus === AppStatus.LOCKED ? 'fa-lock' : 'fa-check-double'}`}></i>
                    </div>
                    <div>
                      <h4 className="font-bold leading-tight">{appStatus === AppStatus.LOCKED ? 'ТОРГОВЛЯ ЗАБЛОКИРОВАНА' : 'СИСТЕМА В НОРМЕ'}</h4>
                      <p className="text-[10px] text-zinc-500 font-bold tracking-widest uppercase">Sentinel Risk Control</p>
                    </div>
                  </div>
                  <p className="text-sm text-zinc-400 leading-relaxed">
                    {appStatus === AppStatus.LOCKED 
                      ? "Вы достигли лимита потерь. Трейдинг остановлен программно для защиты вашего депозита. Возвращайтесь завтра с холодным рассудком."
                      : "Торговые условия соответствуют вашим правилам риск-менеджмента. Соблюдайте свою стратегию."}
                  </p>
                </div>

                {/* AI Coach */}
                <div className="glass p-6 rounded-2xl">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-8 h-8 rounded-lg bg-sky-500 flex items-center justify-center text-zinc-950">
                      <i className="fas fa-brain text-sm"></i>
                    </div>
                    <h3 className="font-bold text-sm uppercase tracking-wider text-sky-400">AI Риск-Коуч</h3>
                  </div>
                  <div className="relative">
                    {isAiLoading ? (
                       <div className="animate-pulse space-y-2">
                          <div className="h-3 bg-zinc-800 rounded w-full"></div>
                          <div className="h-3 bg-zinc-800 rounded w-5/6"></div>
                       </div>
                    ) : (
                      <p className="text-sm italic text-zinc-300 leading-relaxed">"{aiFeedback}"</p>
                    )}
                  </div>
                </div>

                {/* Limits Quick View */}
                <div className="glass p-6 rounded-2xl">
                   <h3 className="font-bold text-sm mb-4 text-zinc-500 uppercase tracking-widest">Текущие лимиты</h3>
                   <div className="space-y-3">
                      <div className="flex justify-between items-center text-sm">
                        <span>Лимит убытков</span>
                        <span className="font-bold mono text-emerald-400">${settings.dailyLossLimit}</span>
                      </div>
                      <div className="flex justify-between items-center text-sm">
                        <span>Макс. сделок</span>
                        <span className="font-bold mono text-emerald-400">{settings.maxTradesPerDay}</span>
                      </div>
                   </div>
                </div>

              </div>
            </div>
          ) : (
            <div className="max-w-2xl glass p-8 rounded-3xl animate-in fade-in duration-500">
              <div className="flex items-center gap-4 mb-8">
                <div className="w-12 h-12 bg-zinc-800 rounded-2xl flex items-center justify-center text-emerald-500">
                  <i className="fas fa-sliders-h text-xl"></i>
                </div>
                <div>
                  <h3 className="text-xl font-bold">Настройка правил</h3>
                  <p className="text-sm text-zinc-500">Эти параметры будут сохранены в памяти браузера.</p>
                </div>
              </div>

              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-zinc-400 mb-2">Дневной лимит потерь (USD)</label>
                  <input 
                    type="number"
                    value={settings.dailyLossLimit}
                    onChange={(e) => setSettings(prev => ({ ...prev, dailyLossLimit: Number(e.target.value) }))}
                    className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-3 focus:ring-2 focus:ring-emerald-500 outline-none transition-all mono"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-zinc-400 mb-2">Максимальное количество сделок в день</label>
                  <input 
                    type="number"
                    value={settings.maxTradesPerDay}
                    onChange={(e) => setSettings(prev => ({ ...prev, maxTradesPerDay: Number(e.target.value) }))}
                    className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-3 focus:ring-2 focus:ring-emerald-500 outline-none transition-all mono"
                  />
                </div>
                
                <div className="p-4 rounded-xl bg-zinc-800/30 border border-zinc-800 flex items-center justify-between">
                  <div>
                    <h4 className="font-bold text-sm">Мастер-контроль</h4>
                    <p className="text-xs text-zinc-500">Включение/выключение программного лимитатора.</p>
                  </div>
                  <button 
                    onClick={() => setSettings(prev => ({ ...prev, tradingEnabled: !prev.tradingEnabled }))}
                    className={`w-12 h-6 rounded-full transition-all relative ${settings.tradingEnabled ? 'bg-emerald-500' : 'bg-zinc-700'}`}
                  >
                    <div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${settings.tradingEnabled ? 'left-7' : 'left-1'}`}></div>
                  </button>
                </div>

                <div className="flex gap-4 pt-6">
                  <button 
                    onClick={() => setActiveTab('dashboard')}
                    className="flex-1 bg-emerald-500 text-zinc-950 font-bold py-4 rounded-xl hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/10"
                  >
                    Применить настройки
                  </button>
                  <button 
                    onClick={() => { setTrades([]); setAiFeedback("Данные сброшены."); }}
                    className="px-6 py-4 rounded-xl border border-rose-500/30 text-rose-500 font-bold hover:bg-rose-500/10 transition-all"
                  >
                    Сброс статистики
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </main>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);