src/App.jsx

import React, { useState, useEffect } from 'react';
import { 
  Image as ImageIcon, Loader2, Sparkles, Terminal, AlertCircle, 
  Settings, Layers, Cpu, Maximize, Zap, Wifi, WifiOff, ChevronDown, ChevronUp, Play, RefreshCw, Link as LinkIcon
} from 'lucide-react';

// 👇 LINK DATABASE CỦA BẠN (Thay link Firebase của bạn vào đây)
const FIREBASE_DB_URL = "https://uploadlink-28426-default-rtdb.firebaseio.com/api_url.json";

// Link dự phòng (Local hoặc mặc định)
const DEFAULT_API_URL = "pretty-dory-noble.ngrok-free.app";

const SAMPLERS = [
  "Euler a", "Euler", "LMS", "Heun", "DPM2", "DPM2 a",
  "DPM++ 2S a", "DPM++ 2M", "DPM++ SDE", "DPM++ 2M SDE",
  "DPM++ 2M Karras", "DPM++ SDE Karras", "DDIM", "UniPC"
];

const App = () => {
  // --- STATE ---
  const [apiUrl, setApiUrl] = useState(DEFAULT_API_URL);
  const [prompt, setPrompt] = useState('A futuristic city with neon lights, cyberpunk style');
  const [negPrompt, setNegPrompt] = useState('blurry, bad quality, watermark, text, ugly, distorted, nsfw');
  
  const [checkpoints, setCheckpoints] = useState(["Loading..."]);
  const [loras, setLoras] = useState(["None"]);
  const [vaes, setVaes] = useState(["Default"]);
  const [upscalers, setUpscalers] = useState(["None"]);

  const [selectedCheckpoint, setSelectedCheckpoint] = useState("");
  const [selectedLora, setSelectedLora] = useState("None");
  const [selectedVae, setSelectedVae] = useState("Default");
  const [selectedUpscaler, setSelectedUpscaler] = useState("None");
  
  // Settings
  const [width, setWidth] = useState(1024);
  const [height, setHeight] = useState(1024);
  const [steps, setSteps] = useState(30);
  const [cfgScale, setCfgScale] = useState(7.0);
  const [seed, setSeed] = useState(-1);
  const [sampler, setSampler] = useState("DPM++ 2M Karras");
  const [upscaleStrength, setUpscaleStrength] = useState(0.35);
  const [upscaleFactor, setUpscaleFactor] = useState(1.0); 
  const [showAdvanced, setShowAdvanced] = useState(false);

  const [generatedImage, setGeneratedImage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [fetchingInfo, setFetchingInfo] = useState(false);
  const [error, setError] = useState('');
  const [logs, setLogs] = useState([]);
  const [serverStatus, setServerStatus] = useState('unknown'); // unknown, connected, disconnected

  // --- FUNCTIONS ---
  const addLog = (message) => {
    const timestamp = new Date().toLocaleTimeString();
    setLogs(prev => [`[${timestamp}] ${message}`, ...prev].slice(0, 50));
  };

  // Hàm kết nối server (Logic Firebase + Manual)
  const connectToServer = async (manualUrl = null) => {
    setFetchingInfo(true);
    setError('');
    let targetUrl = manualUrl || apiUrl;

    try {
      // 1. Nếu không nhập tay, thử lấy từ Firebase trước
      if (!manualUrl && FIREBASE_DB_URL.includes("firebaseio.com")) {
        addLog("☁️ Đang lấy link từ Firebase...");
        try {
          const fireRes = await fetch(FIREBASE_DB_URL);
          if (fireRes.ok) {
            const fireUrl = await fireRes.json();
            if (fireUrl && fireUrl.startsWith("http")) {
              targetUrl = fireUrl;
              addLog(`🔗 Tìm thấy server: ${fireUrl}`);
            }
          }
        } catch (e) {
          console.warn("Lỗi Firebase:", e);
          addLog("⚠️ Không lấy được link từ Firebase, dùng link mặc định.");
        }
      }

      // Clean URL
      const cleanUrl = targetUrl.replace(/\/$/, "");
      setApiUrl(cleanUrl); // Cập nhật UI

      // FIX: Xử lý nhẹ nhàng nếu là link mặc định thay vì báo lỗi đỏ
      if (cleanUrl.includes("thay-link")) {
        setServerStatus('disconnected');
        addLog("⚠️ Chưa có link Server. Vui lòng nhập link Ngrok vào ô bên dưới.");
        setFetchingInfo(false);
        return; // Dừng tại đây, không ném lỗi
      }

      addLog(`Kiểm tra kết nối: ${cleanUrl}...`);
      
      // 2. Gọi API /info để lấy danh sách model
      const res = await fetch(`${cleanUrl}/info`, {
        headers: { "ngrok-skip-browser-warning": "69420" }
      });
      
      if (!res.ok) {
          const text = await res.text();
          throw new Error(`Lỗi Server (${res.status}): ${text.slice(0, 50)}`);
      }
      
      const data = await res.json();
      
      if (data.models?.length > 0) {
        setCheckpoints(data.models);
        setSelectedCheckpoint(data.models[0]);
      }
      if (data.loras?.length > 0) setLoras(data.loras);
      if (data.vaes?.length > 0) setVaes(data.vaes);
      if (data.upscalers?.length > 0) setUpscalers(data.upscalers);
      
      setServerStatus('connected');
      addLog(`✅ Kết nối thành công!`);
      
    } catch (err) {
      console.error(err);
      setServerStatus('disconnected');
      setError(err.message);
      addLog(`❌ Kết nối thất bại: ${err.message}`);
    } finally {
      setFetchingInfo(false);
    }
  };

  // Auto connect khi mới vào
  useEffect(() => {
    connectToServer();
  }, []);

  const handleGenerate = async () => {
    if (serverStatus !== 'connected') {
      setError('Vui lòng kết nối Server trước!');
      return;
    }

    setLoading(true);
    setError('');
    addLog(`🎨 Đang vẽ...`);

    try {
      let upscalerValue = "None";
      if (selectedUpscaler !== "None") upscalerValue = selectedUpscaler;
      else if (upscaleFactor > 1) upscalerValue = upscaleFactor.toString();

      const payload = {
        prompt, negative_prompt: negPrompt, 
        width, height, // Gửi kích thước ảnh
        steps, cfg_scale: cfgScale, seed,
        sampler_name: sampler, checkpoint: selectedCheckpoint, lora: selectedLora,
        vae: selectedVae, upscaler: upscalerValue, upscale_strength: upscaleStrength
      };

      const response = await fetch(`${apiUrl}/generate`, {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
          "ngrok-skip-browser-warning": "69420",
        },
        body: JSON.stringify(payload),
      });

      if (!response.ok) throw new Error(`Lỗi Server: ${response.status}`);
      const data = await response.json();
      
      if (data.image) {
        setGeneratedImage(data.image);
        addLog('✨ Đã vẽ xong!');
      }

    } catch (err) {
      setError(err.message);
      addLog(`Lỗi: ${err.message}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans p-4 selection:bg-purple-500/30">
      
      {/* Header */}
      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md sticky top-0 z-50 mb-6 rounded-xl shadow-lg">
        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-gradient-to-br from-indigo-500 to-purple-600 p-2 rounded-lg shadow-inner">
              <Sparkles className="w-5 h-5 text-white" />
            </div>
            <h1 className="font-bold text-lg text-white tracking-tight">Kaggle Studio <span className="text-purple-400">Pro</span></h1>
          </div>

          <div className="flex items-center gap-3">
             <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full border transition-all ${serverStatus === 'connected' ? 'bg-green-500/10 border-green-500/20 text-green-400' : 'bg-red-500/10 border-red-500/20 text-red-400'}`}>
                {serverStatus === 'connected' ? <Wifi className="w-4 h-4" /> : <WifiOff className="w-4 h-4" />}
                <span className="text-xs font-bold">{serverStatus === 'connected' ? 'ONLINE' : 'OFFLINE'}</span>
             </div>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto grid lg:grid-cols-12 gap-6">
        
        {/* --- LEFT: CONTROLS --- */}
        <div className="lg:col-span-4 xl:col-span-3 flex flex-col gap-5">
          
          {/* 🔴 CONNECTION BOX (Hiện khi mất kết nối) */}
          {serverStatus !== 'connected' && (
            <section className="bg-red-900/10 border border-red-500/30 rounded-xl p-4 animate-in fade-in slide-in-from-top-2">
              <label className="text-xs font-bold text-red-400 uppercase mb-2 flex items-center gap-1">
                <LinkIcon className="w-3 h-3" /> Server Connection
              </label>
              <div className="flex gap-2">
                <input 
                  type="text" 
                  value={apiUrl} 
                  onChange={(e) => setApiUrl(e.target.value)} 
                  placeholder="https://xxx.ngrok-free.app"
                  className="flex-1 bg-slate-950 border border-slate-700 text-[10px] rounded-lg px-2 py-2 outline-none focus:border-red-500 font-mono"
                />
                <button 
                  onClick={() => connectToServer(apiUrl)} 
                  disabled={fetchingInfo}
                  className="bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/50 rounded-lg px-3 py-2 transition-colors"
                >
                  {fetchingInfo ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
                </button>
              </div>
              <p className="text-[10px] text-slate-500 mt-2">Dán link Ngrok (hoặc kiểm tra Firebase) rồi bấm nút Connect.</p>
            </section>
          )}

          {/* Models */}
          <section className="bg-slate-900 border border-slate-800 rounded-xl p-4 space-y-4 shadow-sm">
            <div>
              <label className="text-xs font-bold text-slate-400 uppercase mb-1 flex items-center gap-1">
                <Layers className="w-3 h-3" /> Checkpoint
              </label>
              <select value={selectedCheckpoint} onChange={e => setSelectedCheckpoint(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-xs rounded-lg p-2.5 outline-none focus:border-purple-500 text-slate-200 transition-all">
                {checkpoints.map(m => <option key={m} value={m}>{m}</option>)}
              </select>
            </div>

            <div className="grid grid-cols-2 gap-2">
                <div>
                  <label className="text-[10px] font-bold text-slate-400 uppercase mb-1">LoRA</label>
                  <select value={selectedLora} onChange={e => setSelectedLora(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-xs rounded-lg p-2 outline-none text-slate-200">
                    {loras.map(m => <option key={m} value={m}>{m}</option>)}
                  </select>
                </div>
                <div>
                  <label className="text-[10px] font-bold text-slate-400 uppercase mb-1">VAE</label>
                  <select value={selectedVae} onChange={e => setSelectedVae(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-xs rounded-lg p-2 outline-none text-slate-200">
                    {vaes.map(m => <option key={m} value={m}>{m}</option>)}
                  </select>
                </div>
            </div>
          </section>

          {/* Prompt */}
          <section className="bg-slate-900 border border-slate-800 rounded-xl p-4 flex flex-col gap-3 shadow-sm">
             <textarea value={prompt} onChange={e => setPrompt(e.target.value)} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 text-sm focus:border-purple-500 outline-none h-28 placeholder:text-slate-600 text-slate-200 resize-none transition-all" placeholder="Positive Prompt..." />
             <textarea value={negPrompt} onChange={e => setNegPrompt(e.target.value)} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 text-xs focus:border-red-500 outline-none h-16 placeholder:text-slate-600 text-slate-200 resize-none transition-all" placeholder="Negative Prompt..." />
          </section>

          {/* Advanced Toggle */}
          <section className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-sm">
            <button onClick={() => setShowAdvanced(!showAdvanced)} className="w-full flex items-center justify-between p-3 hover:bg-slate-800/50 transition-colors text-slate-300">
              <span className="text-xs font-bold uppercase flex items-center gap-2"><Settings className="w-3 h-3" /> Advanced</span>
              {showAdvanced ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
            </button>

            {showAdvanced && (
              <div className="p-4 border-t border-slate-800 bg-slate-950/30 space-y-4 animate-in slide-in-from-top-2">
                {/* Size Sliders */}
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="text-[10px] uppercase text-slate-500 font-bold mb-1 block">Width: {width}px</label>
                    <input 
                      type="range" min="512" max="1536" step="64" value={width} onChange={(e) => setWidth(Number(e.target.value))}
                      className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500"
                    />
                  </div>
                  <div>
                    <label className="text-[10px] uppercase text-slate-500 font-bold mb-1 block">Height: {height}px</label>
                    <input 
                      type="range" min="512" max="1536" step="64" value={height} onChange={(e) => setHeight(Number(e.target.value))}
                      className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500"
                    />
                  </div>
                </div>

                {/* Steps & CFG */}
                <div className="space-y-3">
                    <div className="flex justify-between text-[10px] uppercase text-slate-500 font-bold"><span>Steps: {steps}</span><span>CFG: {cfgScale}</span></div>
                    <input type="range" min="10" max="60" value={steps} onChange={e => setSteps(Number(e.target.value))} className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500" />
                    <input type="range" min="1" max="20" step="0.5" value={cfgScale} onChange={e => setCfgScale(Number(e.target.value))} className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500" />
                </div>

                {/* Sampler & Seed */}
                <div className="grid grid-cols-2 gap-2">
                    <div>
                        <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">Sampler</label>
                        <select value={sampler} onChange={e => setSampler(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-[10px] rounded p-1.5 outline-none text-slate-200">
                            {SAMPLERS.map(s => <option key={s} value={s}>{s}</option>)}
                        </select>
                    </div>
                    <div>
                        <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">Seed</label>
                        <input type="number" value={seed} onChange={e => setSeed(Number(e.target.value))} className="w-full bg-slate-950 border border-slate-700 text-[10px] rounded p-1.5 outline-none text-slate-200" />
                    </div>
                </div>

                {/* Upscale */}
                <div className="pt-2 border-t border-slate-800/50">
                    <label className="text-[10px] font-bold text-slate-400 uppercase mb-2 flex items-center gap-1"><Maximize className="w-3 h-3" /> Upscale (High-Res)</label>
                    
                    <div className="mb-2">
                      <select value={selectedUpscaler} onChange={e => setSelectedUpscaler(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-[10px] rounded p-1.5 outline-none mb-1 text-slate-200">
                          {upscalers.map(u => <option key={u} value={u}>{u}</option>)}
                      </select>
                    </div>

                    <div className="flex gap-2 mb-2">
                        {[1.0, 1.5, 2.0].map(f => (
                            <button key={f} onClick={() => setUpscaleFactor(f)} className={`flex-1 py-1 text-[10px] rounded border transition-colors ${upscaleFactor === f ? 'bg-purple-600 border-purple-500 text-white' : 'bg-slate-950 border-slate-700 text-slate-400 hover:bg-slate-800'}`}>
                                {f === 1.0 ? 'Off' : `${f}x`}
                            </button>
                        ))}
                    </div>
                    {upscaleFactor > 1 && (
                        <div>
                             <label className="text-[10px] text-slate-500 block mb-1">Denoise Strength: {upscaleStrength}</label>
                             <input type="range" min="0.1" max="0.5" step="0.05" value={upscaleStrength} onChange={e => setUpscaleStrength(Number(e.target.value))} className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500" />
                        </div>
                    )}
                </div>
              </div>
            )}
          </section>

          <button onClick={handleGenerate} disabled={loading} className={`w-full py-3 rounded-xl font-bold text-white shadow-lg flex items-center justify-center gap-2 transition-all ${loading ? 'bg-slate-800 opacity-50 cursor-not-allowed' : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:scale-[0.98] hover:shadow-purple-500/25'}`}>
            {loading ? <Loader2 className="animate-spin" /> : <Play className="fill-current" />}
            {loading ? 'GENERATING...' : 'GENERATE'}
          </button>
          
          {error && <div className="p-3 bg-red-900/20 border border-red-500/20 rounded-lg text-red-400 text-xs flex items-center gap-2 animate-in fade-in slide-in-from-top-1"><AlertCircle className="w-4 h-4 shrink-0" />{error}</div>}

        </div>

        {/* --- RIGHT: PREVIEW --- */}
        <div className="lg:col-span-8 xl:col-span-9 flex flex-col gap-4">
          <div className="bg-slate-900 border border-slate-800 rounded-2xl flex items-center justify-center min-h-[500px] relative overflow-hidden shadow-2xl">
             {/* Background Grid */}
             <div className="absolute inset-0 opacity-20 pointer-events-none" 
                 style={{backgroundImage: 'radial-gradient(#4f46e5 1px, transparent 1px)', backgroundSize: '24px 24px'}}>
             </div>

             {!generatedImage && <div className="text-slate-600 flex flex-col items-center z-10"><ImageIcon className="w-16 h-16 mb-4 opacity-20" /><span className="text-sm font-mono opacity-50">Ready to Imagine</span></div>}
             
             {generatedImage && (
               <div className="relative w-full h-full p-2 z-10">
                 <img src={generatedImage} alt="Result" className="w-full h-full object-contain rounded-lg shadow-lg animate-in zoom-in duration-300" />
                 <a href={generatedImage} download="image.png" className="absolute top-4 right-4 bg-slate-900/80 text-white p-2 rounded-lg hover:bg-purple-600 transition-colors border border-slate-700"><Maximize className="w-5 h-5"/></a>
               </div>
             )}

             {/* Loading Overlay */}
             {loading && (
               <div className="absolute inset-0 bg-slate-950/80 backdrop-blur-sm z-20 flex flex-col items-center justify-center">
                 <div className="w-16 h-16 border-4 border-slate-700 border-t-purple-500 rounded-full animate-spin"></div>
                 <p className="mt-4 text-purple-400 text-sm font-mono animate-pulse">Diffusion Process Running...</p>
               </div>
             )}
          </div>
          
          <div className="bg-black rounded-xl border border-slate-800 p-3 h-36 overflow-y-auto font-mono text-[10px] text-slate-400 scrollbar-thin scrollbar-thumb-slate-800">
            <div className="flex items-center gap-2 mb-2 pb-2 border-b border-slate-900 text-slate-500 font-bold uppercase"><Terminal className="w-3 h-3" /> System Logs</div>
            {logs.map((log, i) => (
              <div key={i} className="hover:text-slate-200 transition-colors py-0.5 border-l-2 border-transparent hover:border-purple-500 pl-2">
                <span className="opacity-30 mr-2">{i+1}</span>{log}
              </div>
            ))}
          </div>
        </div>

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

export default App;