import React, { useState, useEffect } from 'react';
import { Download, RefreshCw, Smartphone, CheckCircle, Zap } from 'lucide-react';

const App = () => {
  const [imageUrl, setImageUrl] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const apiKey = ""; 

  const generateLogo = async () => {
    setIsLoading(true);
    setError(null);
    
    // Промпт для максимально жирного и чистого логотипа без рамок
    const promptText = "One single massive ultra-bold iconic symbol inspired by geometric patterns. Extremely thick solid golden lines. The symbol fills the entire frame. Minimalist 2D flat design, solid deep turquoise background. No borders, no outlines, no small details. Surgical precision, high-end branding. 512x512.";

    try {
      let retries = 0;
      const maxRetries = 5;
      let success = false;

      while (retries < maxRetries && !success) {
        try {
          const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              instances: [{ prompt: promptText }],
              parameters: { sampleCount: 1 }
            })
          });

          if (!response.ok) throw new Error('Generation failed');

          const result = await response.json();
          if (result.predictions && result.predictions[0].bytesBase64Encoded) {
            const base64Data = `data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`;
            setImageUrl(base64Data);
            success = true;
          } else {
            throw new Error('No image data');
          }
        } catch (err) {
          retries++;
          if (retries === maxRetries) throw err;
          await new Promise(res => setTimeout(res, Math.pow(2, retries) * 1000));
        }
      }
    } catch (err) {
      setError("Ошибка загрузки. Попробуйте еще раз.");
    } finally {
      setIsLoading(false);
    }
  };

  const downloadImage = () => {
    if (!imageUrl) return;
    const link = document.createElement('a');
    link.href = imageUrl;
    link.download = 'qazaq_logo_512.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

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

  return (
    <div className="min-h-screen bg-white flex flex-col items-center justify-center p-6 font-sans">
      <div className="max-w-md w-full space-y-8 text-center">
        <h1 className="text-3xl font-black tracking-tighter">ВАШ ЛОГОТИП</h1>
        
        <div className="relative aspect-square w-full overflow-hidden rounded-[40px] shadow-2xl border-8 border-slate-50">
          {isLoading ? (
            <div className="absolute inset-0 bg-slate-100 flex items-center justify-center">
              <RefreshCw className="w-10 h-10 animate-spin text-slate-400" />
            </div>
          ) : (
            <img src={imageUrl} alt="Logo" className="w-full h-full object-cover" />
          )}
        </div>

        <div className="grid gap-3">
          <button 
            onClick={downloadImage}
            disabled={isLoading || !imageUrl}
            className="w-full py-4 bg-black text-white rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-zinc-800 transition-all disabled:opacity-50"
          >
            <Download className="w-5 h-5" /> СКАЧАТЬ PNG
          </button>
          <button 
            onClick={generateLogo}
            disabled={isLoading}
            className="w-full py-4 bg-slate-100 text-slate-600 rounded-2xl font-bold hover:bg-slate-200 transition-all flex items-center justify-center gap-2"
          >
            <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} /> ОБНОВИТЬ
          </button>
        </div>

        <div className="pt-4 border-t border-slate-100 flex justify-center gap-6">
           <div className="flex flex-col items-center gap-2">
              <div className="w-12 h-12 rounded-full overflow-hidden ring-2 ring-slate-100 shadow-sm">
                <img src={imageUrl} className="w-full h-full object-cover" />
              </div>
              <span className="text-[10px] font-bold text-slate-400">КРУГ</span>
           </div>
           <div className="flex flex-col items-center gap-2">
              <div className="w-12 h-12 rounded-xl overflow-hidden ring-2 ring-slate-100 shadow-sm">
                <img src={imageUrl} className="w-full h-full object-cover" />
              </div>
              <span className="text-[10px] font-bold text-slate-400">ANDROID</span>
           </div>
        </div>
      </div>
    </div>
  );
};

export default App;