import React, { useState, useEffect } from 'react';
import { Terminal, Cpu, Database, Layout, ShieldCheck, Activity, Brain } from 'lucide-react';

const App = () => {
  const [status, setStatus] = useState({ online: false, cpu: 0, ram: 0 });
  const [plugins, setPlugins] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Köprü adresi (aaPanel üzerindeki Python adresi)
  const BRIDGE_URL = "http://159.146.103.236:5000";

  const checkConnection = async () => {
    try {
      setLoading(true);
      // 1. Durum Kontrolü
      const statusRes = await fetch(`${BRIDGE_URL}/api/status`);
      const statusData = await statusRes.json();
      setStatus({ online: true, cpu: statusData.cpu, ram: statusData.ram });

      // 2. Plugin Taraması
      const pluginRes = await fetch(`${BRIDGE_URL}/api/plugins/list`);
      const pluginData = await pluginRes.json();
      if (pluginData.success) {
        setPlugins(pluginData.plugins);
      }
      
      setError(null);
    } catch (err) {
      setError("Köprüye bağlanılamadı. Python Manager çalışıyor mu?");
      setStatus({ online: false, cpu: 0, ram: 0 });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    checkConnection();
    const interval = setInterval(checkConnection, 10000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 p-4 md:p-8 font-sans">
      <div className="max-w-6xl mx-auto space-y-6">
        
        {/* Header */}
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center bg-slate-900/50 p-6 rounded-3xl border border-white/5 backdrop-blur-xl">
          <div className="flex items-center gap-4">
            <div className="p-3 bg-indigo-600 rounded-2xl shadow-lg shadow-indigo-500/20">
              <Brain size={32} className="text-white" />
            </div>
            <div>
              <h1 className="text-2xl font-black italic tracking-tighter uppercase">Kanka-Pro AI</h1>
              <p className="text-xs text-slate-500 font-bold tracking-widest uppercase">Otonom Yönetim Sistemi</p>
            </div>
          </div>
          
          <div className="mt-4 md:mt-0 flex items-center gap-4 bg-black/40 p-2 rounded-2xl px-4 border border-white/5">
            <div className={`w-3 h-3 rounded-full ${status.online ? 'bg-emerald-500 animate-pulse' : 'bg-red-500'}`}></div>
            <span className="text-xs font-bold font-mono tracking-tighter">
              {status.online ? "BAĞLANTI AKTİF" : "BAĞLANTI KESİLDİ"}
            </span>
          </div>
        </div>

        {error && (
          <div className="bg-red-500/10 border border-red-500/20 p-4 rounded-2xl text-red-400 text-sm flex items-center gap-3">
            <ShieldCheck size={20} /> {error}
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {/* Stats */}
          <div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div className="bg-slate-900 p-6 rounded-[2.5rem] border border-white/5 relative overflow-hidden group">
              <Cpu className="absolute right-[-10px] bottom-[-10px] text-white/5 size-32 group-hover:text-indigo-500/10 transition-colors" />
              <p className="text-xs font-bold text-slate-500 uppercase mb-2">İşlemci Yükü</p>
              <h3 className="text-5xl font-black tracking-tighter">{status.cpu}%</h3>
              <div className="mt-4 w-full bg-black/30 h-1.5 rounded-full overflow-hidden">
                <div className="bg-indigo-500 h-full transition-all duration-1000" style={{ width: `${status.cpu}%` }}></div>
              </div>
            </div>

            <div className="bg-slate-900 p-6 rounded-[2.5rem] border border-white/5 relative overflow-hidden group">
              <Activity className="absolute right-[-10px] bottom-[-10px] text-white/5 size-32 group-hover:text-emerald-500/10 transition-colors" />
              <p className="text-xs font-bold text-slate-500 uppercase mb-2">Bellek Kullanımı</p>
              <h3 className="text-5xl font-black tracking-tighter">{status.ram}%</h3>
              <div className="mt-4 w-full bg-black/30 h-1.5 rounded-full overflow-hidden">
                <div className="bg-emerald-500 h-full transition-all duration-1000" style={{ width: `${status.ram}%` }}></div>
              </div>
            </div>

            {/* AI Insights Area */}
            <div className="sm:col-span-2 bg-indigo-600/10 border border-indigo-500/20 p-8 rounded-[3rem] flex flex-col md:flex-row items-center gap-8 shadow-2xl shadow-indigo-500/5">
               <div className="w-24 h-24 bg-indigo-600 rounded-full flex items-center justify-center flex-shrink-0 animate-pulse">
                  <Brain size={48} className="text-white" />
               </div>
               <div>
                  <h4 className="text-xl font-bold mb-2">AI Yönetici Raporu</h4>
                  <p className="text-slate-400 text-sm leading-relaxed italic">
                    {plugins.length > 0 
                      ? `Kanka, sunucunda şu an ${plugins.length} adet plugin tespit ettim. Hepsi çalışır durumda görünüyor. İstersen config dosyalarını tarayıp optimize edebilirim.` 
                      : "Sunucuya bağlandım ama henüz plugin listesini alamadım. Dosya yolunu (server_path) bridge.py içinde doğru ayarladığından emin ol kanka."}
                  </p>
               </div>
            </div>
          </div>

          {/* Plugin List Panel */}
          <div className="bg-slate-900 rounded-[2.5rem] border border-white/5 p-6 flex flex-col h-[500px]">
            <div className="flex items-center justify-between mb-6 px-2">
              <div className="flex items-center gap-2">
                <Database className="text-indigo-400" size={20} />
                <h3 className="font-bold text-sm uppercase tracking-widest">Tespit Edilenler</h3>
              </div>
              <span className="bg-indigo-600/20 text-indigo-400 text-[10px] px-2 py-1 rounded-lg font-bold">
                {plugins.length} ADET
              </span>
            </div>
            
            <div className="flex-1 overflow-y-auto pr-2 space-y-2 custom-scrollbar">
              {plugins.length > 0 ? plugins.map((plugin, idx) => (
                <div key={idx} className="bg-black/40 p-3 rounded-2xl border border-white/5 flex items-center gap-3 hover:border-indigo-500/50 transition-colors cursor-default group">
                  <div className="w-8 h-8 bg-slate-800 rounded-xl flex items-center justify-center text-[10px] font-bold group-hover:bg-indigo-600 transition-colors">
                    {idx + 1}
                  </div>
                  <span className="text-xs font-medium truncate">{plugin}</span>
                </div>
              )) : (
                <div className="h-full flex flex-col items-center justify-center text-slate-600 italic text-xs text-center p-8">
                  <Layout size={40} className="mb-4 opacity-20" />
                  Henüz bir plugin bulunamadı.
                </div>
              )}
            </div>
          </div>
        </div>

      </div>
    </div>
  );
};

export default App;