import React, { useState, useEffect } from 'react';
import { 
  Home, 
  Wand2, 
  Copy, 
  CheckCircle2, 
  AlertCircle, 
  Loader2, 
  LayoutTemplate,
  MessageSquare,
  MonitorPlay,
  Sparkles,
  Lightbulb,
  Download
} from 'lucide-react';

const ESTRUCTURAS = [
  { id: 'recorrido', nombre: 'Recorrido de Propiedad (Gancho, Tour, Llamado a la acción)' },
  { id: 'aida', nombre: 'AIDA (Atención, Interés, Deseo, Acción) - Ideal para ventas' },
  { id: 'pas', nombre: 'PAS (Problema, Agitación, Solución) - Captación de propietarios' },
  { id: 'storytelling', nombre: 'Storytelling (La historia detrás de la casa o la zona)' },
  { id: 'educativo', nombre: 'Educativo / Tips (Mito vs Realidad, 3 Consejos de compra)' },
  { id: 'venta_directa', nombre: 'Venta Directa (Características clave, Beneficios, Precio)' }
];

const INTENCIONES = [
  { id: 'profesional', nombre: 'Profesional y Confiable' },
  { id: 'cercano', nombre: 'Cercano y Amigable' },
  { id: 'lujo', nombre: 'Lujoso y Exclusivo' },
  { id: 'urgencia', nombre: 'Sentido de Urgencia / Oportunidad de Inversión' },
  { id: 'emocional', nombre: 'Emocional / Hogareño' }
];

const PLATAFORMAS = [
  { id: 'reels', nombre: 'Instagram Reels / TikTok (Tour rápido, < 1 min)' },
  { id: 'youtube', nombre: 'Video de YouTube (Recorrido detallado, > 3 min)' },
  { id: 'historias', nombre: 'Historias de Instagram (Secuencia de interacción)' },
  { id: 'llamada', nombre: 'Guion para Llamada en Frío (Captación de clientes)' },
  { id: 'portal', nombre: 'Descripción para Portal Inmobiliario / Copy' }
];

export default function App() {
  const [idea, setIdea] = useState('');
  const [estructura, setEstructura] = useState(ESTRUCTURAS[0].nombre);
  const [intencion, setIntencion] = useState(INTENCIONES[0].nombre);
  const [plataforma, setPlataforma] = useState(PLATAFORMAS[0].nombre);
  
  const [loading, setLoading] = useState(false);
  const [resultado, setResultado] = useState('');
  const [error, setError] = useState('');
  const [copiado, setCopiado] = useState(false);

  const [isEnhancing, setIsEnhancing] = useState(false);
  const [titulos, setTitulos] = useState([]);
  const [isGeneratingTitles, setIsGeneratingTitles] = useState(false);

  // Estados para PWA
  const [isInstallable, setIsInstallable] = useState(false);
  const [deferredPrompt, setDeferredPrompt] = useState(null);

  // 1. SEGURIDAD PARA CLOUDFLARE: 
  const apiKey = ""; 

  // --- LÓGICA DE PWA (Progressive Web App) ---
  useEffect(() => {
    // 1. Inyectar Web App Manifest dinámicamente
    const manifest = {
      name: "Real Estate Script Studio",
      short_name: "ScriptStudio",
      description: "Generador de contenido con IA para asesores inmobiliarios",
      start_url: ".",
      display: "standalone",
      background_color: "#f8fafc",
      theme_color: "#4f46e5",
      icons: [
        {
          src: "https://api.iconify.design/lucide/home.svg?color=%234f46e5&width=192&height=192",
          sizes: "192x192",
          type: "image/svg+xml",
          purpose: "any maskable"
        },
        {
          src: "https://api.iconify.design/lucide/home.svg?color=%234f46e5&width=512&height=512",
          sizes: "512x512",
          type: "image/svg+xml",
          purpose: "any maskable"
        }
      ]
    };

    const manifestBlob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
    const manifestUrl = URL.createObjectURL(manifestBlob);
    
    let manifestLink = document.querySelector('link[rel="manifest"]');
    if (!manifestLink) {
      manifestLink = document.createElement('link');
      manifestLink.rel = 'manifest';
      document.head.appendChild(manifestLink);
    }
    manifestLink.href = manifestUrl;

    // 2. Registrar Service Worker Básico Dinámico
    const swCode = `
      self.addEventListener('install', (e) => self.skipWaiting());
      self.addEventListener('activate', (e) => e.waitUntil(clients.claim()));
      self.addEventListener('fetch', (e) => {
        // En un entorno de producción, aquí va la lógica de caché offline
      });
    `;
    const swBlob = new Blob([swCode], { type: 'application/javascript' });
    const swUrl = URL.createObjectURL(swBlob);

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register(swUrl).catch(err => {
        console.log('SW registration failed (esperado en algunos iframes):', err);
      });
    }

    // 3. Capturar el evento de instalación
    const handleBeforeInstallPrompt = (e) => {
      e.preventDefault(); // Evitar que aparezca el prompt por defecto
      setDeferredPrompt(e);
      setIsInstallable(true);
    };

    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);

    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
      URL.revokeObjectURL(manifestUrl);
      URL.revokeObjectURL(swUrl);
    };
  }, []);

  const handleInstallClick = async () => {
    if (!deferredPrompt) return;
    
    // Mostrar el prompt de instalación nativo
    deferredPrompt.prompt();
    
    // Esperar a que el usuario responda
    const { outcome } = await deferredPrompt.userChoice;
    
    if (outcome === 'accepted') {
      console.log('El usuario aceptó instalar la PWA');
      setIsInstallable(false); // Ocultar el botón después de instalar
    }
    
    // El prompt solo se puede usar una vez
    setDeferredPrompt(null);
  };
  // --- FIN LÓGICA DE PWA ---


  const fetchWithRetry = async (url, options, retries = 5) => {
    const delays = [1000, 2000, 4000, 8000, 16000];
    for (let i = 0; i < retries; i++) {
      try {
        const response = await fetch(url, options);
        if (!response.ok) {
          throw new Error(`Error HTTP: ${response.status}`);
        }
        return await response.json();
      } catch (e) {
        if (i === retries - 1) throw e;
        await new Promise(res => setTimeout(res, delays[i]));
      }
    }
  };

  const generarGuion = async () => {
    if (!idea.trim()) {
      setError('Por favor, ingresa una idea o frase para el guion.');
      return;
    }

    setLoading(true);
    setError('');
    setResultado('');
    setCopiado(false);
    setTitulos([]); 

    const promptText = `
Actúa basándote en tus instrucciones principales y escribe un guion o texto persuasivo con estos parámetros:

- Propiedad o Tema a tratar: "${idea}"
- Estructura a utilizar: ${estructura}
- Tono o Intención: ${intencion}
- Formato / Plataforma de destino: ${plataforma}

Instrucciones adicionales de formato:
1. Incluye un Título atractivo o un "Gancho" (Hook).
2. Si es formato de video, divide el texto indicando [VISUAL] y [AUDIO].
3. Termina siempre con un Llamado a la Acción (CTA) claro.
    `;

    const systemPrompt = `
      Eres un asistente de marketing inmobiliario altamente capacitado con experiencia en ventas de lujo.
      Tu objetivo es generar textos magnéticos, usar un lenguaje sofisticado y nunca inventar datos que no se te hayan proporcionado.
      Ayudas a asesores y agentes inmobiliarios a generar guiones para videos, descripciones de propiedades y textos de captación que sean atractivos, profesionales y diseñados para generar leads y ventas.
    `;

    try {
      if (!apiKey) {
        throw new Error("Falta la API Key. Configura la clave en tu entorno de desarrollo.");
      }

      const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
      
      const payload = {
        contents: [{ parts: [{ text: promptText }] }],
        systemInstruction: { parts: [{ text: systemPrompt }] }
      };

      const data = await fetchWithRetry(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      const textResult = data.candidates?.[0]?.content?.parts?.[0]?.text;
      
      if (textResult) {
        setResultado(textResult);
      } else {
        throw new Error("No se recibió contenido de la API.");
      }
    } catch (err) {
      console.error(err);
      setError('Ocurrió un error al generar el guion. Por favor, intenta de nuevo más tarde.');
    } finally {
      setLoading(false);
    }
  };

  const mejorarIdea = async () => {
    if (!idea.trim()) return;
    setIsEnhancing(true);
    setError('');
    
    const promptText = `Toma estas notas breves o descripción básica de una propiedad y conviértelas en un párrafo detallado, atractivo y profesional, ideal para marketing inmobiliario. Resalta los posibles beneficios ocultos. Notas originales: "${idea}"`;
    const systemPrompt = "Eres un asistente de redacción inmobiliaria. Tu objetivo es embellecer y expandir descripciones de propiedades a partir de notas cortas. Devuelve SOLO el texto mejorado, sin introducciones ni comillas.";
    
    try {
      const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
      const data = await fetchWithRetry(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: promptText }] }],
          systemInstruction: { parts: [{ text: systemPrompt }] }
        })
      });
      const textResult = data.candidates?.[0]?.content?.parts?.[0]?.text;
      if (textResult) setIdea(textResult.trim());
    } catch (err) {
      setError('Error al mejorar la descripción con IA.');
    } finally {
      setIsEnhancing(false);
    }
  };

  const generarTitulosVirales = async () => {
    if (!resultado) return;
    setIsGeneratingTitles(true);
    
    const promptText = `Basándote en el siguiente guion o texto inmobiliario, genera exactamente 5 opciones de títulos o "ganchos" (hooks) virales y llamativos para redes sociales (TikTok/Reels/YouTube). Hazlos irresistibles para que la audiencia se detenga a ver el video.\n\nTexto original:\n${resultado}`;
    const systemPrompt = "Eres un experto en viralidad en redes sociales. Genera exactamente 5 ganchos cortos y contundentes basados en el texto proporcionado. Responde en formato de lista.";
    
    try {
      const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
      const data = await fetchWithRetry(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: promptText }] }],
          systemInstruction: { parts: [{ text: systemPrompt }] }
        })
      });
      const textResult = data.candidates?.[0]?.content?.parts?.[0]?.text;
      if (textResult) {
        const lineas = textResult.split('\n').filter(l => l.trim().length > 5);
        setTitulos(lineas);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setIsGeneratingTitles(false);
    }
  };

  const copiarAlPortapapeles = () => {
    try {
      document.execCommand('copy');
      navigator.clipboard.writeText(resultado).then(() => {
        setCopiado(true);
        setTimeout(() => setCopiado(false), 2000);
      });
    } catch (err) {
      const textArea = document.createElement("textarea");
      textArea.value = resultado;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);
      setCopiado(true);
      setTimeout(() => setCopiado(false), 2000);
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans p-4 md:p-8">
      <div className="max-w-6xl mx-auto space-y-6">
        
        {/* Header con Botón de Instalar */}
        <header className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
          <div className="flex items-center space-x-3">
            <div className="p-3 bg-indigo-600 rounded-lg text-white">
              <Home size={28} />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-slate-800 tracking-tight">Real Estate Script Studio</h1>
              <p className="text-slate-500 font-medium">Generador de contenido para asesores inmobiliarios</p>
            </div>
          </div>
          
          {/* Botón de Instalar PWA (Sólo visible si es instalable) */}
          {isInstallable && (
            <button
              onClick={handleInstallClick}
              className="flex items-center justify-center px-4 py-2.5 bg-white border-2 border-indigo-600 text-indigo-700 font-semibold rounded-xl hover:bg-indigo-50 transition-colors shadow-sm"
            >
              <Download className="w-5 h-5 mr-2" />
              Instalar App
            </button>
          )}
        </header>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          
          {/* Columna Izquierda: Formulario (5 columnas) */}
          <div className="lg:col-span-5 space-y-6">
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
              <h2 className="text-xl font-semibold mb-5 flex items-center text-slate-800">
                <Wand2 className="w-5 h-5 mr-2 text-indigo-500" />
                Configura tu Guion
              </h2>

              <div className="space-y-5">
                {/* Input Idea */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    ¿De qué trata? (Propiedad, zona, o servicio a promocionar)
                  </label>
                  <div className="relative">
                    <textarea
                      rows={5}
                      className="w-full px-4 py-3 pb-12 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none transition-shadow"
                      placeholder="Ej: Un apartamento moderno de 3 habitaciones en el centro, ideal para familias jóvenes o como inversión. Tiene vista al parque..."
                      value={idea}
                      onChange={(e) => setIdea(e.target.value)}
                    />
                    <button
                      onClick={mejorarIdea}
                      disabled={isEnhancing || !idea.trim()}
                      title="Mejorar descripción con IA"
                      className="absolute bottom-3 right-3 px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-100 disabled:opacity-50 transition-colors flex items-center shadow-sm border border-indigo-100"
                    >
                      {isEnhancing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
                      <span className="ml-1.5 text-xs font-bold tracking-wide">✨ Mejorar</span>
                    </button>
                  </div>
                </div>

                {/* Select Estructura */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center">
                    <LayoutTemplate className="w-4 h-4 mr-1.5 text-slate-500" />
                    Estructura del Guion
                  </label>
                  <select
                    className="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
                    value={estructura}
                    onChange={(e) => setEstructura(e.target.value)}
                  >
                    {ESTRUCTURAS.map((est) => (
                      <option key={est.id} value={est.nombre}>{est.nombre}</option>
                    ))}
                  </select>
                </div>

                {/* Select Intención */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center">
                    <MessageSquare className="w-4 h-4 mr-1.5 text-slate-500" />
                    Tono / Intención
                  </label>
                  <select
                    className="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
                    value={intencion}
                    onChange={(e) => setIntencion(e.target.value)}
                  >
                    {INTENCIONES.map((int) => (
                      <option key={int.id} value={int.nombre}>{int.nombre}</option>
                    ))}
                  </select>
                </div>

                {/* Select Plataforma */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center">
                    <MonitorPlay className="w-4 h-4 mr-1.5 text-slate-500" />
                    Plataforma / Formato
                  </label>
                  <select
                    className="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
                    value={plataforma}
                    onChange={(e) => setPlataforma(e.target.value)}
                  >
                    {PLATAFORMAS.map((plat) => (
                      <option key={plat.id} value={plat.nombre}>{plat.nombre}</option>
                    ))}
                  </select>
                </div>

                {/* Error Message */}
                {error && (
                  <div className="p-3 bg-red-50 text-red-700 text-sm rounded-lg flex items-start">
                    <AlertCircle className="w-5 h-5 mr-2 shrink-0" />
                    {error}
                  </div>
                )}

                {/* Submit Button */}
                <button
                  onClick={generarGuion}
                  disabled={loading}
                  className={`w-full py-3.5 px-4 rounded-xl text-white font-medium flex items-center justify-center transition-all ${
                    loading 
                      ? 'bg-indigo-400 cursor-not-allowed' 
                      : 'bg-indigo-600 hover:bg-indigo-700 hover:shadow-md active:transform active:scale-[0.98]'
                  }`}
                >
                  {loading ? (
                    <>
                      <Loader2 className="w-5 h-5 mr-2 animate-spin" />
                      Escribiendo guion...
                    </>
                  ) : (
                    <>
                      Generar Guion
                      <Wand2 className="w-4 h-4 ml-2" />
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>

          {/* Columna Derecha: Resultado (7 columnas) */}
          <div className="lg:col-span-7 flex flex-col h-full">
            <div className="bg-white p-0 rounded-2xl shadow-sm border border-slate-200 flex flex-col h-full min-h-[600px] overflow-hidden">
              
              {/* Header del Resultado */}
              <div className="px-6 py-4 border-b border-slate-200 bg-slate-50/50 flex justify-between items-center">
                <h3 className="font-semibold text-slate-800">Resultado</h3>
                {resultado && (
                  <button
                    onClick={copiarAlPortapapeles}
                    className="text-sm font-medium px-3 py-1.5 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 text-slate-600 flex items-center transition-colors shadow-sm"
                  >
                    {copiado ? (
                      <>
                        <CheckCircle2 className="w-4 h-4 mr-1.5 text-green-500" />
                        <span className="text-green-600">¡Copiado!</span>
                      </>
                    ) : (
                      <>
                        <Copy className="w-4 h-4 mr-1.5" />
                        Copiar texto
                      </>
                    )}
                  </button>
                )}
              </div>

              {/* Área de Texto del Resultado */}
              <div className="flex-1 p-6 overflow-auto bg-[#fdfdfc]">
                {loading ? (
                  <div className="h-full flex flex-col items-center justify-center text-slate-400 space-y-4">
                    <Loader2 className="w-10 h-10 animate-spin text-indigo-500" />
                    <p className="animate-pulse">Consultando a la IA, organizando escenas...</p>
                  </div>
                ) : resultado ? (
                  <div className="prose prose-slate max-w-none prose-p:leading-relaxed prose-headings:text-slate-800">
                    {resultado.split('\n').map((line, index) => {
                      if (line.startsWith('#')) {
                        const level = line.match(/^#+/)[0].length;
                        const text = line.replace(/^#+\s/, '');
                        const Tag = `h${Math.min(level + 2, 6)}`; 
                        return <Tag key={index} className="font-bold mt-4 mb-2">{text}</Tag>;
                      } else if (line.trim() === '') {
                        return <br key={index} />;
                      } else if (line.startsWith('**') && line.endsWith('**')) {
                        return <strong key={index} className="block mt-2 mb-1">{line.replace(/\*\*/g, '')}</strong>;
                      } else {
                         const parts = line.split(/(\*\*.*?\*\*)/g);
                         return (
                           <p key={index} className="mb-2">
                             {parts.map((part, i) => {
                               if (part.startsWith('**') && part.endsWith('**')) {
                                 return <strong key={i}>{part.replace(/\*\*/g, '')}</strong>;
                               }
                               return part;
                             })}
                           </p>
                         );
                      }
                    })}
                  </div>
                ) : (
                  <div className="h-full flex flex-col items-center justify-center text-slate-400">
                    <Home className="w-12 h-12 mb-3 opacity-20" />
                    <p>El guion o texto inmobiliario generado aparecerá aquí.</p>
                    <p className="text-sm mt-1 opacity-75">Llena la información de tu propiedad y presiona Generar.</p>
                  </div>
                )}
              </div>

              {/* Sección de Títulos Virales */}
              {resultado && !loading && (
                <div className="border-t border-slate-200 bg-indigo-50/50 p-6">
                  <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-4">
                    <h4 className="font-semibold text-indigo-900 flex items-center">
                      <Lightbulb className="w-5 h-5 mr-2 text-amber-500" />
                      Ideas de Títulos / Ganchos
                    </h4>
                    <button
                      onClick={generarTitulosVirales}
                      disabled={isGeneratingTitles}
                      className="text-sm font-medium px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white flex items-center transition-colors shadow-sm disabled:opacity-70"
                    >
                      {isGeneratingTitles ? (
                        <Loader2 className="w-4 h-4 animate-spin mr-2" />
                      ) : (
                        <Sparkles className="w-4 h-4 mr-2" />
                      )}
                      ✨ Sugerir Títulos
                    </button>
                  </div>
                  
                  {titulos.length > 0 && (
                    <ul className="space-y-2 mt-4">
                      {titulos.map((titulo, idx) => (
                        <li key={idx} className="p-3 bg-white border border-indigo-100 rounded-lg text-sm text-slate-700 shadow-sm flex items-start leading-relaxed">
                          <span className="text-amber-400 mr-3 mt-0.5">✦</span>
                          {titulo.replace(/^[0-9.\-*]+\s*/, '')}
                        </li>
                      ))}
                    </ul>
                  )}
                  {titulos.length === 0 && !isGeneratingTitles && (
                    <p className="text-sm text-slate-500 italic mt-2">Genera opciones de títulos llamativos para acompañar este guion en tus redes sociales.</p>
                  )}
                </div>
              )}
            </div>
          </div>

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