import React, { useState } from 'react';
import { evaluateTask, generateSocialImage } from './services/geminiService';
import { PedagogicalEvaluation, ViewState, ImageSize } from './types';
import LiveCoach from './components/LiveCoach';
import { 
  Sparkles, 
  ArrowRight, 
  Share2, 
  Download, 
  MessageCircle, 
  CheckCircle2, 
  AlertCircle, 
  Lightbulb,
  Loader2,
  Image as ImageIcon
} from 'lucide-react';

const App: React.FC = () => {
  // State
  const [taskText, setTaskText] = useState('');
  const [viewState, setViewState] = useState<ViewState>(ViewState.INPUT);
  const [evaluation, setEvaluation] = useState<PedagogicalEvaluation | null>(null);
  const [loading, setLoading] = useState(false);
  const [imageLoading, setImageLoading] = useState(false);
  const [generatedImage, setGeneratedImage] = useState<string | null>(null);
  const [imageSize, setImageSize] = useState<ImageSize>(ImageSize.Resolution1K);

  // Handlers
  const handleEvaluate = async () => {
    if (!taskText.trim()) return;
    setLoading(true);
    try {
      const result = await evaluateTask(taskText);
      setEvaluation(result);
      setViewState(ViewState.EVALUATION);
    } catch (e) {
      alert("Hubo un error evaluando la tarea. Por favor intenta de nuevo.");
    } finally {
      setLoading(false);
    }
  };

  const handleGenerateImage = async () => {
    if (!taskText) return;
    setImageLoading(true);
    try {
      const base64Image = await generateSocialImage(taskText, imageSize);
      setGeneratedImage(base64Image);
    } catch (e) {
      alert("Error generando imagen. Intenta seleccionar otra resolución o espera un momento.");
    } finally {
      setImageLoading(false);
    }
  };

  const startLiveSession = () => {
    setViewState(ViewState.LIVE_COACH);
  };

  const endLiveSession = () => {
    setViewState(ViewState.EVALUATION);
  };

  // Render Helpers
  const renderHeader = () => (
    <header className="sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-gray-100 mb-8">
      <div className="max-w-3xl mx-auto px-4 py-4 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 flex items-center justify-center text-white">
            <Sparkles size={18} />
          </div>
          <h1 className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
            PedagoGlow
          </h1>
        </div>
        {viewState === ViewState.EVALUATION && (
          <button 
            onClick={() => setViewState(ViewState.INPUT)}
            className="text-sm font-medium text-gray-500 hover:text-purple-600 transition-colors"
          >
            Nueva Tarea
          </button>
        )}
      </div>
    </header>
  );

  const renderInput = () => (
    <div className="max-w-2xl mx-auto px-4 w-full animate-fade-in-up">
      <div className="text-center mb-10">
        <h2 className="text-3xl font-bold text-gray-900 mb-4">
          Eleva tus tareas escolares
        </h2>
        <p className="text-gray-500 text-lg">
          Evalúa, mejora y crea contenido visual para tus actividades educativas con IA.
        </p>
      </div>

      <div className="bg-white rounded-3xl shadow-xl p-2 border border-gray-100">
        <textarea
          className="w-full h-48 p-6 text-lg text-gray-700 placeholder-gray-300 resize-none outline-none rounded-2xl"
          placeholder="Escribe o pega aquí la descripción de tu tarea..."
          value={taskText}
          onChange={(e) => setTaskText(e.target.value)}
        />
        <div className="flex justify-end p-2">
          <button
            onClick={handleEvaluate}
            disabled={!taskText.trim() || loading}
            className={`
              flex items-center gap-2 px-8 py-3 rounded-full text-white font-semibold text-lg shadow-lg transform transition-all
              ${!taskText.trim() || loading 
                ? 'bg-gray-300 cursor-not-allowed' 
                : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:scale-105 hover:shadow-purple-500/30'
              }
            `}
          >
            {loading ? <Loader2 className="animate-spin" /> : <Sparkles size={20} />}
            {loading ? 'Analizando...' : 'Evaluar Tarea'}
          </button>
        </div>
      </div>
    </div>
  );

  const renderEvaluation = () => {
    if (!evaluation) return null;

    return (
      <div className="max-w-4xl mx-auto px-4 pb-20 space-y-8 animate-fade-in">
        {/* Score Card */}
        <div className="bg-white rounded-3xl p-8 shadow-sm border border-gray-100 flex flex-col md:flex-row items-center gap-8">
          <div className="relative w-32 h-32 flex-shrink-0">
            <svg className="w-full h-full" viewBox="0 0 36 36">
              <path
                className="text-gray-100"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                fill="none"
                stroke="currentColor"
                strokeWidth="3"
              />
              <path
                className="text-pink-500"
                strokeDasharray={`${evaluation.score}, 100`}
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                fill="none"
                stroke="currentColor"
                strokeWidth="3"
              />
            </svg>
            <div className="absolute inset-0 flex items-center justify-center flex-col">
              <span className="text-3xl font-bold text-gray-800">{evaluation.score}</span>
              <span className="text-xs text-gray-400 font-medium">PUNTOS</span>
            </div>
          </div>
          <div className="flex-1 text-center md:text-left">
            <h2 className="text-2xl font-bold text-gray-900 mb-2">Evaluación Pedagógica</h2>
            <p className="text-gray-600 leading-relaxed">{evaluation.summary}</p>
          </div>
          <button
             onClick={startLiveSession}
             className="flex items-center gap-2 px-6 py-3 bg-gray-900 text-white rounded-full font-medium hover:bg-gray-800 transition-transform hover:-translate-y-1"
          >
            <MessageCircle size={18} />
            Coach en Vivo
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Strengths */}
          <div className="bg-white rounded-3xl p-6 shadow-sm border border-green-100">
            <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
              <CheckCircle2 className="text-green-500" /> Fortalezas
            </h3>
            <ul className="space-y-3">
              {evaluation.strengths.map((s, i) => (
                <li key={i} className="flex items-start gap-2 text-gray-600 text-sm">
                  <span className="w-1.5 h-1.5 rounded-full bg-green-400 mt-1.5 flex-shrink-0" />
                  {s}
                </li>
              ))}
            </ul>
          </div>

          {/* Weaknesses */}
          <div className="bg-white rounded-3xl p-6 shadow-sm border border-orange-100">
            <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
              <AlertCircle className="text-orange-500" /> A mejorar
            </h3>
            <ul className="space-y-3">
              {evaluation.weaknesses.map((w, i) => (
                <li key={i} className="flex items-start gap-2 text-gray-600 text-sm">
                  <span className="w-1.5 h-1.5 rounded-full bg-orange-400 mt-1.5 flex-shrink-0" />
                  {w}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Improved Version */}
        <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-3xl p-8 border border-purple-100 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-purple-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
          <div className="absolute -bottom-8 -left-8 w-32 h-32 bg-pink-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
          
          <h3 className="text-xl font-bold text-gray-900 mb-4 relative z-10 flex items-center gap-2">
            <Sparkles className="text-purple-600" size={20} />
            Propuesta Mejorada
          </h3>
          <div className="bg-white/60 backdrop-blur-sm rounded-xl p-6 text-gray-700 leading-relaxed whitespace-pre-wrap relative z-10 shadow-sm">
            {evaluation.improvedVersion}
          </div>
          
          <div className="mt-6 relative z-10">
            <h4 className="font-semibold text-gray-800 mb-2 flex items-center gap-2">
              <Lightbulb size={16} className="text-yellow-500"/> Tips Prácticos
            </h4>
            <div className="flex flex-wrap gap-2">
              {evaluation.practicalTips.map((tip, i) => (
                <span key={i} className="px-3 py-1 bg-white rounded-full text-xs font-medium text-gray-600 border border-gray-100 shadow-sm">
                  {tip}
                </span>
              ))}
            </div>
          </div>
        </div>

        {/* Social Media Generator */}
        <div className="bg-white rounded-3xl p-8 shadow-sm border border-gray-100">
          <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
            <ImageIcon className="text-pink-500" />
            Compartir en Redes
          </h3>
          
          <div className="flex flex-col md:flex-row gap-8 items-start">
             <div className="flex-1 w-full space-y-4">
                <p className="text-gray-500 text-sm">
                  Genera una imagen artística basada en esta tarea para compartirla con tus estudiantes o colegas en Instagram.
                </p>
                
                <div>
                  <label className="block text-xs font-semibold text-gray-700 uppercase mb-2">Resolución</label>
                  <div className="flex bg-gray-50 rounded-xl p-1 w-fit">
                    {Object.values(ImageSize).map((size) => (
                      <button
                        key={size}
                        onClick={() => setImageSize(size)}
                        className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${imageSize === size ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
                      >
                        {size}
                      </button>
                    ))}
                  </div>
                </div>

                <button
                  onClick={handleGenerateImage}
                  disabled={imageLoading}
                  className="w-full md:w-auto px-6 py-3 bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 text-white rounded-xl font-medium shadow-md hover:shadow-lg transition-all active:scale-95 flex items-center justify-center gap-2"
                >
                  {imageLoading ? <Loader2 className="animate-spin" /> : <Sparkles size={18} />}
                  Generar Imagen
                </button>
             </div>

             <div className="w-full md:w-1/2 aspect-square bg-gray-50 rounded-2xl flex items-center justify-center overflow-hidden border border-gray-100 relative group">
                {generatedImage ? (
                  <>
                    <img src={generatedImage} alt="Generated Task Art" className="w-full h-full object-cover" />
                    <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-4 backdrop-blur-sm">
                       <a href={generatedImage} download="pedagoglow-task.png" className="p-3 bg-white rounded-full text-gray-900 hover:scale-110 transition-transform">
                          <Download size={24} />
                       </a>
                       <button className="p-3 bg-white rounded-full text-gray-900 hover:scale-110 transition-transform" onClick={() => alert("Copiado al portapapeles (simulado)")}>
                          <Share2 size={24} />
                       </button>
                    </div>
                  </>
                ) : (
                  <div className="text-center text-gray-400">
                    <ImageIcon className="mx-auto mb-2 opacity-50" size={48} />
                    <span className="text-sm">La imagen aparecerá aquí</span>
                  </div>
                )}
             </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen pb-12 bg-[#fafafa]">
      {renderHeader()}
      
      <main className="container mx-auto">
        {viewState === ViewState.INPUT && renderInput()}
        {viewState === ViewState.EVALUATION && renderEvaluation()}
      </main>

      {viewState === ViewState.LIVE_COACH && (
        <LiveCoach 
          initialContext={taskText} 
          onClose={endLiveSession} 
        />
      )}
    </div>
  );
};

export default App;
<!-- PageDrop Unified FAB Widget -->
<link rel="stylesheet" href="https://pagedrop.io/fab-widget.css?v=6">


<!-- Like Prompt Popup (shown after 10s for Explore content) -->
<div id="pagedrop-like-prompt">
  <div id="pagedrop-like-prompt-content">
    <button id="pagedrop-like-prompt-close" aria-label="Close">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"/>
        <line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
    <div id="pagedrop-like-prompt-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
      </svg>
    </div>
    <p id="pagedrop-like-prompt-text">Enjoying this? A quick like helps keep it online longer.</p>
  </div>
  <div id="pagedrop-like-prompt-arrow"></div>
</div>


<!-- Expiration Warning Popup (only shown for content expiring soon) -->
<div id="pagedrop-expiry-popup">
  <div id="pagedrop-expiry-popup-content">
    <div id="pagedrop-expiry-popup-icon">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <polyline points="12,6 12,12 16,14"/>
      </svg>
    </div>
    <h3 id="pagedrop-expiry-popup-title">Content Expiring Soon</h3>
    <p id="pagedrop-expiry-popup-desc">
      This content will be deleted in less than 24 hours. If you like it, you can extend its lifetime to keep it available.
    </p>
    <div id="pagedrop-expiry-popup-actions">
      <button class="pagedrop-popup-btn pagedrop-popup-btn-secondary" id="pagedrop-expiry-dismiss">
        Dismiss
      </button>
      <button class="pagedrop-popup-btn pagedrop-popup-btn-primary" id="pagedrop-expiry-extend">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5v14m-7-7h14"/>
        </svg>
        Extend Lifetime
      </button>
    </div>
  </div>
</div>

<div id="pagedrop-fab-container">
  <!-- Expanded Panel (appears above pill on hover/click) -->
  <div id="pagedrop-fab-expanded">
    
    <div class="pagedrop-fab-row">
      <span class="pagedrop-fab-label"><span id="pagedrop-like-count-expanded">0</span> likes</span>
      <button id="pagedrop-like-btn" class="pagedrop-fab-btn pagedrop-fab-btn-like">
        <svg id="pagedrop-like-icon-btn" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
        </svg>
        <span id="pagedrop-like-text">Like</span>
      </button>
    </div>
    
    <div class="pagedrop-fab-row pagedrop-fab-row-info">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pagedrop-fab-row-icon">
        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
      <span class="pagedrop-fab-label"><span id="pagedrop-view-count-expanded">0</span> views</span>
    </div>
    <div class="pagedrop-fab-row">
      <span class="pagedrop-fab-label">12 days left</span>
      <button id="pagedrop-extend-btn" class="pagedrop-fab-btn pagedrop-fab-btn-extend">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5v14m-7-7h14"/>
        </svg>
        Extend
      </button>
    </div>
    <div class="pagedrop-fab-cta">
      Like what you see? <a href="https://pagedrop.io" target="_blank" rel="noopener">Create your own</a>
    </div>
    <div class="pagedrop-fab-report">
      <a href="#" id="pagedrop-report-btn">Report this content</a>
    </div>
  </div>

  <!-- Collapsed Pill (always visible) -->
  <div id="pagedrop-fab-pill" class="">
    <a href="https://pagedrop.io" target="_blank" rel="noopener" class="pagedrop-fab-logo" title="Hosted on PageDrop" onclick="event.stopPropagation();">
      <img src="https://pagedrop.io/icon.png" alt="PageDrop" />
    </a>
    <div class="pagedrop-fab-divider"></div>
    <div id="pagedrop-fab-views" class="pagedrop-fab-views" title="0 views">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
      <span id="pagedrop-view-count-pill">0</span>
    </div>
    <div class="pagedrop-fab-divider"></div>
    
    <div class="pagedrop-fab-likes" id="pagedrop-likes-display">
      <svg id="pagedrop-like-icon-pill" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
      </svg>
      <span id="pagedrop-like-count-pill">0</span>
    </div>
    <div class="pagedrop-fab-divider"></div>
    
    <div class="pagedrop-fab-days ">
      
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <polyline points="12,6 12,12 16,14"/>
      </svg>
      
      <span>12d</span>
    </div>
  </div>
</div>

<script src="https://pagedrop.io/fab-widget.js" data-slug="meteoric-cron-yxr4" data-base-url="https://pagedrop.io" data-is-explore="true" data-days-remaining="12" data-view-count="0" defer></script>