Untitled

import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";

const PrayerApp = () => {
  const [prayers, setPrayers] = useState([
    { id: 1, request: "Por favor oren por mi familia", author: "María", prayerCount: 0, category: "Familia" },
    { id: 2, request: "Necesito oración por mi salud", author: "Juan", prayerCount: 0, category: "Salud" },
    { id: 3, request: "Oren por mi trabajo", author: "Carlos", prayerCount: 0, category: "Trabajo" }
  ]);
  
  const [activePrayer, setActivePrayer] = useState(null);
  const [progress, setProgress] = useState(0);
  const [showAmen, setShowAmen] = useState(false);
  const [timer, setTimer] = useState(null);
  const [isHovering, setIsHovering] = useState(false);

  const startPrayer = (prayerId) => {
    setActivePrayer(prayerId);
    setProgress(0);
    setShowAmen(false);
    
    const startTime = Date.now();
    const duration = 60000; // 1 minuto
    
    const interval = setInterval(() => {
      const elapsed = Date.now() - startTime;
      const newProgress = Math.min((elapsed / duration) * 100, 100);
      
      if (newProgress >= 100) {
        clearInterval(interval);
        setShowAmen(true);
      }
      
      setProgress(newProgress);
    }, 100);
    
    setTimer(interval);
  };

  const finishPrayer = () => {
    setPrayers(prayers.map(prayer => 
      prayer.id === activePrayer 
        ? { ...prayer, prayerCount: prayer.prayerCount + 1 }
        : prayer
    ));
    setActivePrayer(null);
    setProgress(0);
    setShowAmen(false);
    if (timer) clearInterval(timer);
  };

  useEffect(() => {
    return () => {
      if (timer) clearInterval(timer);
    };
  }, [timer]);

  const getCategoryColor = (category) => {
    const colors = {
      Familia: 'bg-pink-100 text-pink-800',
      Salud: 'bg-green-100 text-green-800',
      Trabajo: 'bg-blue-100 text-blue-800'
    };
    return colors[category] || 'bg-gray-100 text-gray-800';
  };

  return (
    <div className="max-w-md mx-auto p-4 min-h-screen bg-gradient-to-b from-indigo-50 to-white">
      <h1 className="text-3xl font-bold text-center mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600">
        Peticiones de Oración
      </h1>
      
      <div className="space-y-4">
        {prayers.map((prayer) => (
          <Card key={prayer.id} className="transform transition-all duration-300 hover:scale-102 hover:shadow-lg">
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle className="text-lg">{prayer.author}</CardTitle>
                <span className={`px-3 py-1 rounded-full text-sm ${getCategoryColor(prayer.category)}`}>
                  {prayer.category}
                </span>
              </div>
            </CardHeader>
            <CardContent>
              <p className="mb-4 text-gray-700">{prayer.request}</p>
              <div className="flex justify-between items-center">
                <span className="text-sm text-gray-500 flex items-center">
                  <span className="mr-2">🙏</span>
                  {prayer.prayerCount} personas han orado
                </span>
                <Button
                  onClick={() => startPrayer(prayer.id)}
                  disabled={activePrayer !== null}
                  className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 transition-all duration-300"
                >
                  Orar
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <AlertDialog open={activePrayer !== null}>
        <AlertDialogContent className="bg-gradient-to-b from-gray-900 to-gray-800 text-white">
          <AlertDialogHeader>
            <AlertDialogTitle className="text-center text-2xl font-light">
              Momento de Oración
            </AlertDialogTitle>
          </AlertDialogHeader>
          <div className="flex flex-col items-center justify-center my-8">
            <div 
              className="relative w-32 h-64"
              onMouseEnter={() => setIsHovering(true)}
              onMouseLeave={() => setIsHovering(false)}
            >
              {/* Base de la vela */}
              <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-16 h-40 bg-gradient-to-b from-white to-gray-200 rounded-lg shadow-lg" />
              
              {/* Decoración de la vela */}
              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent" />
              
              {/* Mecha */}
              <div className="absolute top-6 left-1/2 transform -translate-x-1/2 w-1 h-4 bg-gray-600" />
              
              {/* Llama principal */}
              <div 
                className="absolute top-0 left-1/2 transform -translate-x-1/2 w-8 h-16"
                style={{
                  background: `
                    radial-gradient(ellipse at center, 
                      rgba(255,191,0,${progress/100}) 0%, 
                      rgba(255,147,0,${progress/200}) 50%, 
                      transparent 100%
                    )
                  `,
                  boxShadow: `
                    0 0 ${progress}px ${progress/3}px rgba(255,191,0,${progress/200}),
                    0 0 ${progress*1.5}px ${progress/2}px rgba(255,147,0,${progress/300}),
                    0 0 ${progress*2}px ${progress}px rgba(255,191,0,${progress/400})
                  `,
                  borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
                  animation: `${isHovering ? 'flicker-fast' : 'flicker'} 0.5s ease-in-out infinite alternate`
                }}
              />
              
              {/* Resplandor ambiental */}
              <div 
                className="absolute top-16 left-1/2 transform -translate-x-1/2 w-48 h-48 rounded-full"
                style={{
                  background: `radial-gradient(circle at center, 
                    rgba(255,223,0,${progress/400}) 0%,
                    rgba(255,191,0,${progress/600}) 30%, 
                    transparent 70%
                  )`
                }}
              />
            </div>
            
            {/* Texto inspiracional */}
            <p className="text-center mt-4 text-gray-300 italic font-light">
              "La oración es la llave de la mañana y el cerrojo de la noche"
            </p>

            {/* Barra de progreso */}
            <div className="w-full mt-6 bg-gray-700 h-2 rounded-full overflow-hidden">
              <div 
                className="h-full rounded-full transition-all duration-100"
                style={{
                  width: `${progress}%`,
                  background: 'linear-gradient(to right, #FFA500, #FFD700)'
                }}
              />
            </div>
          </div>
          <AlertDialogFooter>
            {showAmen && (
              <AlertDialogAction 
                onClick={finishPrayer}
                className="bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 text-white font-bold transform hover:scale-105 transition-all duration-300"
              >
                AMÉN
              </AlertDialogAction>
            )}
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <style jsx global>{`
        @keyframes flicker {
          0% {
            transform: translateX(-50%) scale(0.95) rotate(-1deg);
            opacity: 0.9;
          }
          100% {
            transform: translateX(-50%) scale(1.05) rotate(1deg);
            opacity: 1;
          }
        }
        
        @keyframes flicker-fast {
          0% {
            transform: translateX(-50%) scale(0.9) rotate(-2deg);
            opacity: 0.85;
          }
          100% {
            transform: translateX(-50%) scale(1.1) rotate(2deg);
            opacity: 1;
          }
        }
      `}</style>
    </div>
  );
};

export default PrayerApp;