import React, { useState, useEffect, useCallback, useRef } from 'react';
import { CheckCircle, Sun, Moon, Clock, Trophy, Brain, Zap, Droplet, Activity, Flame, ChevronDown, ChevronUp, AlertTriangle, Smartphone, X, Timer } from 'lucide-react';

// --- FIREBASE CONFIGURATION ---
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, setDoc, onSnapshot } from 'firebase/firestore';
import { getAuth, signInAnonymously, onAuthStateChanged } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "AIzaSyBsN6uG3opYhRb2Hvs4vrNYi_7lS6SinQo",
  authDomain: "servi2017-88ec4.firebaseapp.com",
  databaseURL: "https://servi2017-88ec4.firebaseio.com",
  projectId: "servi2017-88ec4",
  storageBucket: "servi2017-88ec4.firebasestorage.app",
  messagingSenderId: "240673477454",
  appId: "1:240673477454:web:166d372ac74a3c5e74841f"
};

// Inicialización Segura (Evita re-inicializaciones en entornos de desarrollo cálidos)
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// --- DICCIONARIO DE ÍCONOS ---
const ICON_MAP = {
  Zap: Zap, Sun: Sun, Droplet: Droplet, Activity: Activity, Brain: Brain, Moon: Moon
};

// --- COMPONENTES UX/UI AVANZADOS ---

// Tensión Magnética (Micro-Interacción Orgánica)
const MagneticWrapper = ({ children, strength = 0.15, className = "" }) => {
  const ref = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handlePointerMove = (e) => {
    if (!ref.current) return;
    const { clientX, clientY } = e;
    const { height, width, left, top } = ref.current.getBoundingClientRect();
    const centerX = left + width / 2;
    const centerY = top + height / 2;
    setPosition({ x: (clientX - centerX) * strength, y: (clientY - centerY) * strength });
  };

  const handlePointerLeave = () => setPosition({ x: 0, y: 0 });

  return (
    <div
      ref={ref}
      onPointerMove={handlePointerMove}
      onPointerLeave={handlePointerLeave}
      className={className}
      style={{ 
        transform: `translate3d(${position.x}px, ${position.y}px, 0)`, 
        transition: position.x === 0 ? 'transform 0.4s cubic-bezier(0.25, 1, 0.5, 1)' : 'none' 
      }}
    >
      {children}
    </div>
  );
};

// Sistema de Partículas Vectoriales
const ParticleSystem = () => {
  const particles = Array.from({ length: 25 });
  return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden z-0 opacity-60">
      {particles.map((_, i) => {
        const size = Math.random() * 4 + 2;
        const left = Math.random() * 100;
        const duration = Math.random() * 5 + 4;
        const delay = Math.random() * 3;
        return (
          <div
            key={i}
            className="absolute rounded-full bg-amber-400/80 shadow-[0_0_8px_rgba(251,191,36,0.8)]"
            style={{
              width: `${size}px`, height: `${size}px`, left: `${left}%`, bottom: '-10px',
              animation: `floatUp ${duration}s ease-in-out ${delay}s infinite`,
            }}
          />
        );
      })}
    </div>
  );
};

export default function App() {
  // ESTADO CORE
  const [supplements, setSupplements] = useState([
    { id: 'creat', name: 'Creatina', period: 'morning', done: false, timeTaken: null, iconKey: 'Zap' },
    { id: 'vitD', name: 'Vitamina D3 + K2', period: 'morning', done: false, timeTaken: null, iconKey: 'Sun' },
    { id: 'omega', name: 'Omega 3', period: 'morning', done: false, timeTaken: null, iconKey: 'Droplet' },
    { id: 'curflex', name: 'Curflex Dúo', period: 'morning', done: false, timeTaken: null, iconKey: 'Activity' },
    { id: 'activa', name: 'Activamente', period: 'morning', done: false, timeTaken: null, iconKey: 'Brain' },
    { id: 'bici', name: 'Biciclamato de sodio', period: 'night', done: false, timeTaken: null, iconKey: 'Moon' }
  ]);

  const [currentDayStr, setCurrentDayStr] = useState('');
  const [now, setNow] = useState(new Date());
  
  // ESTADOS DE RED Y AUTENTICACIÓN (FIREBASE)
  const [user, setUser] = useState(null);
  const [isOnline, setIsOnline] = useState(typeof navigator !== 'undefined' ? navigator.onLine : true);
  const [isSyncing, setIsSyncing] = useState(false);

  // ESTADOS UI & MODALES
  const [auditTrail, setAuditTrail] = useState([]);
  const [showAudit, setShowAudit] = useState(false);
  const [morningListVisible, setMorningListVisible] = useState(true);
  const [nightListVisible, setNightListVisible] = useState(true);
  const [showIosGuide, setShowIosGuide] = useState(false);
  const [floatingMessage, setFloatingMessage] = useState({ text: '', visible: false, icon: null });

  // ESTADOS DE CONTROL DE FLUJO Y SEGURIDAD
  const clickHistoryRef = useRef([]);
  const [showSpeedWarning, setShowSpeedWarning] = useState(false);
  const [lastActionSnapshot, setLastActionSnapshot] = useState(null);
  const SPEED_LIMIT_CLICKS = 3;
  const SPEED_LIMIT_WINDOW_MS = 1500;

  const [islandExpanded, setIslandExpanded] = useState(false);
  const holdTimeoutRef = useRef(null);
  const timeoutRefs = useRef([]);

  // --- 1. FIREBASE & RED SETUP ---
  useEffect(() => {
    // Monitor de red
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // Auth Silenciosa
    signInAnonymously(auth).catch(err => console.error("Error Auth:", err));
    const unsubAuth = onAuthStateChanged(auth, (u) => setUser(u));

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
      unsubAuth();
    };
  }, []);

  // Escucha de Base de Datos en Tiempo Real
  useEffect(() => {
    if (!user) return;
    setIsSyncing(true);
    
    // Ruta en Firestore: users/{uid}/routine/today
    const docRef = doc(db, 'users', user.uid, 'routine', 'today');
    const unsubSnapshot = onSnapshot(docRef, (docSnap) => {
      if (docSnap.exists()) {
        const data = docSnap.data();
        if (data.supplements) setSupplements(data.supplements);
        if (data.currentDayStr) setCurrentDayStr(data.currentDayStr);
      }
      setIsSyncing(false);
    }, (error) => {
      console.error("Error Sync:", error);
      setIsSyncing(false);
    });

    return () => unsubSnapshot();
  }, [user]);

  // Función de escritura a la nube
  const syncToFirebase = async (newSupplements, newDayStr) => {
    if (!user) return;
    try {
      await setDoc(doc(db, 'users', user.uid, 'routine', 'today'), {
        supplements: newSupplements,
        currentDayStr: newDayStr,
        lastUpdated: new Date().toISOString()
      }, { merge: true });
    } catch (e) {
      console.error("Error Guardando:", e);
    }
  };

  // --- 2. MOTORES INTERNOS ---
  useEffect(() => {
    const timer = setInterval(() => setNow(new Date()), 60000);
    return () => clearInterval(timer);
  }, []);

  // Reset inteligente 4:00 AM adaptado a Firebase
  useEffect(() => {
    const logicalDate = new Date(now.getTime() - 4 * 60 * 60 * 1000);
    const dateString = logicalDate.toISOString().split('T')[0];

    if (currentDayStr !== '' && currentDayStr !== dateString) {
      const resetSups = supplements.map(sup => ({ ...sup, done: false, timeTaken: null }));
      setSupplements(resetSups);
      setMorningListVisible(true);
      setNightListVisible(true);
      setIslandExpanded(false);
      setAuditTrail(prev => [{ time: new Date().toISOString(), action: 'SYSTEM_RESET', supId: 'ALL' }, ...prev]);
      setCurrentDayStr(dateString);
      
      // Empujar el reset a la base de datos para todos los dispositivos
      syncToFirebase(resetSups, dateString);
    }
  }, [now, currentDayStr, supplements, user]);

  const playSound = useCallback((type) => {
    if (typeof window === 'undefined') return;
    try {
      const AudioContextClass = window.AudioContext || window.webkitAudioContext;
      if (!AudioContextClass) return;
      const ctx = new AudioContextClass();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.connect(gain);
      gain.connect(ctx.destination);
      
      if (type === 'pop') {
        osc.type = 'sine'; osc.frequency.setValueAtTime(400, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(800, ctx.currentTime + 0.1);
        gain.gain.setValueAtTime(0.3, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1);
        osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.1);
      } else if (type === 'success') {
        osc.type = 'triangle'; osc.frequency.setValueAtTime(440, ctx.currentTime); osc.frequency.setValueAtTime(554.37, ctx.currentTime + 0.1); osc.frequency.setValueAtTime(659.25, ctx.currentTime + 0.2);
        gain.gain.setValueAtTime(0.2, ctx.currentTime); gain.gain.linearRampToValueAtTime(0, ctx.currentTime + 0.5);
        osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.5);
      } else if (type === 'error') {
        osc.type = 'sawtooth'; osc.frequency.setValueAtTime(150, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(50, ctx.currentTime + 0.3);
        gain.gain.setValueAtTime(0.4, ctx.currentTime); gain.gain.linearRampToValueAtTime(0, ctx.currentTime + 0.3);
        osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.3);
      }
    } catch (e) {}
  }, []);

  const triggerHaptic = useCallback((type) => {
    if (typeof navigator === 'undefined' || !navigator.vibrate) return;
    try {
      if (type === 'pop') navigator.vibrate(40);
      if (type === 'undo') navigator.vibrate(20);
      if (type === 'success') navigator.vibrate([100, 50, 100, 50, 200]);
      if (type === 'error') navigator.vibrate([200, 100, 200]);
      if (type === 'island') navigator.vibrate(10);
    } catch (e) {}
  }, []);

  const checkSpeedLimit = (currentTime) => {
    const recentClicks = clickHistoryRef.current.filter(time => currentTime - time < SPEED_LIMIT_WINDOW_MS);
    const newHistory = [...recentClicks, currentTime];
    clickHistoryRef.current = newHistory; 
    return newHistory.length >= SPEED_LIMIT_CLICKS;
  };

  // --- LÓGICA PRINCIPAL DE MARCAJE ---
  const toggleSupplement = (id) => {
    const timeStampStr = new Date().toISOString();
    const currentTimeMs = Date.now();

    setLastActionSnapshot(supplements);
    const isSpeeding = checkSpeedLimit(currentTimeMs);
    
    if (isSpeeding) {
      triggerHaptic('error'); playSound('error'); setShowSpeedWarning(true);
      setAuditTrail(at => [{ time: timeStampStr, action: 'SPEED_LIMIT_TRIGGERED', supId: 'ALERTA' }, ...at].slice(0, 50));
      return; // Bloquea la escritura si va muy rápido
    }

    setSupplements(prev => {
      const newState = prev.map(sup => {
        if (sup.id === id) {
          const isNowDone = !sup.done;
          
          const logId = setTimeout(() => {
            setAuditTrail(at => [{ time: timeStampStr, action: isNowDone ? 'MARCADO' : 'DESMARCADO', supId: sup.name }, ...at].slice(0, 50));
          }, 0);
          timeoutRefs.current.push(logId);

          if (isNowDone) {
            playSound('pop'); triggerHaptic('pop');
            
            // REFUERZO COGNITIVO: Validación Base
            if (id === 'creat' || id === 'activa') {
              setFloatingMessage({ text: 'Neuro-protección activa', visible: true, icon: id === 'creat' ? Zap : Brain });
              const toastId = setTimeout(() => setFloatingMessage(prev => ({ ...prev, visible: false })), 3000);
              timeoutRefs.current.push(toastId);
            }
          } else {
            triggerHaptic('undo');
            if (id === 'creat' || id === 'activa') setFloatingMessage(prev => ({ ...prev, visible: false }));
          }
          
          return { ...sup, done: isNowDone, timeTaken: isNowDone ? timeStampStr : null };
        }
        return sup;
      });

      // Firebase Sync Inmediato
      syncToFirebase(newState, currentDayStr);

      // Verificación de Bloques Completos
      const currentSup = prev.find(s => s.id === id);
      if (!currentSup.done) { 
        const periodSups = newState.filter(s => s.period === currentSup.period);
        if (periodSups.every(s => s.done)) {
          const toId = setTimeout(() => {
            playSound('success'); triggerHaptic('success');
            if (currentSup.period === 'morning') setMorningListVisible(false);
            if (currentSup.period === 'night') setNightListVisible(false);
          }, 300);
          timeoutRefs.current.push(toId);
        }
      }
      return newState;
    });
  };

  const undoSpeedLimitAction = () => {
    if (lastActionSnapshot) {
      setSupplements(lastActionSnapshot);
      syncToFirebase(lastActionSnapshot, currentDayStr); // Restaura en Firebase
      setAuditTrail(at => [{ time: new Date().toISOString(), action: 'DESHACER_RAPIDO', supId: 'SISTEMA' }, ...at].slice(0, 50));
    }
    setShowSpeedWarning(false);
    clickHistoryRef.current = [];
    triggerHaptic('undo');
  };

  useEffect(() => {
    return () => timeoutRefs.current.forEach(clearTimeout);
  }, []);

  const getRelativeTime = (isoString) => {
    if (!isoString) return '';
    const diffMs = now - new Date(isoString);
    const diffMins = Math.floor(diffMs / 60000);
    if (diffMins < 1) return 'hace segs';
    if (diffMins < 60) return `hace ${diffMins}m`;
    const diffHours = Math.floor(diffMins / 60);
    const remainingMins = diffMins % 60;
    return remainingMins > 0 ? `hace ${diffHours}h ${remainingMins}m` : `hace ${diffHours}h`;
  };

  // CÁLCULOS DINÁMICOS
  const morningSups = supplements.filter(s => s.period === 'morning');
  const nightSups = supplements.filter(s => s.period === 'night');
  const sortedMorning = [...morningSups].sort((a, b) => (a.done === b.done ? 0 : a.done ? 1 : -1));
  const sortedNight = [...nightSups].sort((a, b) => (a.done === b.done ? 0 : a.done ? 1 : -1));
  const morningDoneCount = morningSups.filter(s => s.done).length;
  const nightDoneCount = nightSups.filter(s => s.done).length;
  const allDone = supplements.every(s => s.done);
  
  const currentDayIndex = now.getDay() === 0 ? 6 : now.getDay() - 1;

  const dynamicWeekHistory = [true, true, true, true, true, true, false]; 
  dynamicWeekHistory[currentDayIndex] = allDone;
  const isPerfectWeek = dynamicWeekHistory.every(Boolean);

  const isMorningAlertActive = now.getHours() >= 11 && morningDoneCount < morningSups.length;

  const handleIslandTouchStart = () => {
    triggerHaptic('island');
    holdTimeoutRef.current = setTimeout(() => { setIslandExpanded(true); triggerHaptic('success'); }, 400); 
  };
  const handleIslandTouchEnd = () => { if (holdTimeoutRef.current) clearTimeout(holdTimeoutRef.current); };
  const toggleIsland = () => setIslandExpanded(!islandExpanded);

  const pendingSups = supplements.filter(s => !s.done);

  let islandBaseStyle = "pointer-events-auto bg-black text-white transition-all duration-[500ms] ease-[cubic-bezier(0.23,1,0.32,1)] overflow-hidden cursor-pointer relative z-10 ";
  if (islandExpanded) islandBaseStyle += "w-[90%] max-w-sm rounded-[2.5rem] p-6 border ";
  else islandBaseStyle += "w-24 h-8 rounded-full flex items-center justify-center border ";

  if (isPerfectWeek) islandBaseStyle += "border-amber-400/60 shadow-[0_0_20px_rgba(251,191,36,0.3)] ";
  else if (isMorningAlertActive && !islandExpanded) islandBaseStyle += "animate-border-pulse ";
  else islandBaseStyle += "border-slate-800 shadow-xl ";

  // --- UI LIQUID GLASS (REDISEÑO COMPLETO DE TARJETAS) ---
  const SupplementCard = ({ sup }) => {
    const isMorning = sup.period === 'morning';
    const IconComponent = ICON_MAP[sup.iconKey]; 
    const timeObj = sup.timeTaken ? new Date(sup.timeTaken) : null;
    
    return (
      <MagneticWrapper strength={0.05} className="w-full mb-4">
        <button
          onClick={() => toggleSupplement(sup.id)}
          className={`w-full text-left p-5 rounded-[2rem] flex items-center justify-between transition-all duration-500 transform active:scale-[0.98] relative overflow-hidden backdrop-blur-2xl group
            ${sup.done 
              ? 'bg-black/[0.2] border border-white/[0.02] shadow-none opacity-60' // Glass apagado/fundido
              : isMorning 
                ? 'bg-white/[0.03] border border-white/[0.08] border-t-white/[0.15] border-l-white/[0.15] shadow-[0_8px_32px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.1),0_0_15px_rgba(245,158,11,0.1)] hover:shadow-[0_8px_32px_rgba(0,0,0,0.5),inset_0_1px_1px_rgba(255,255,255,0.15),0_0_25px_rgba(245,158,11,0.2)]' 
                : 'bg-white/[0.03] border border-white/[0.08] border-t-white/[0.15] border-l-white/[0.15] shadow-[0_8px_32px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.1),0_0_15px_rgba(99,102,241,0.1)] hover:shadow-[0_8px_32px_rgba(0,0,0,0.5),inset_0_1px_1px_rgba(255,255,255,0.15),0_0_25px_rgba(99,102,241,0.2)]'
            }
          `}
        >
          {/* Brillo de Cristal Superior (Highlight interior) */}
          {!sup.done && <div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent pointer-events-none" />}
          
          <div className="flex items-center gap-4 z-10 w-full relative">
            <div className={`transition-colors duration-500 p-2.5 rounded-2xl ${sup.done ? 'bg-emerald-500/10 text-emerald-400' : isMorning ? 'bg-amber-500/10 text-amber-400 group-hover:bg-amber-500/20' : 'bg-indigo-500/10 text-indigo-400 group-hover:bg-indigo-500/20'}`}>
              {sup.done ? <CheckCircle size={28} /> : <IconComponent size={28} />}
            </div>
            <div className="flex-1">
              <h3 className={`text-[19px] font-semibold tracking-wide transition-colors duration-300 drop-shadow-sm ${sup.done ? 'text-slate-500 line-through decoration-slate-600' : 'text-slate-100'}`}>
                {sup.name}
              </h3>
              {sup.done && timeObj && (
                <div className="flex items-center justify-between text-xs mt-1.5 w-full">
                  <div className="flex items-center gap-1.5 text-emerald-400/70 font-medium">
                    <Clock size={12} />
                    <span>{timeObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
                  </div>
                  <span className="text-slate-500/80 italic font-mono">{getRelativeTime(sup.timeTaken)}</span>
                </div>
              )}
            </div>
          </div>
        </button>
      </MagneticWrapper>
    );
  };

  return (
    <div className="min-h-screen bg-[#070A11] text-slate-200 flex justify-center font-sans selection:bg-amber-500/30 relative overflow-hidden">
      
      {/* CAPAS DE TEXTURA: Noise y Mesh Gradients */}
      <div className="absolute inset-0 z-0 opacity-50 pointer-events-none" 
           style={{ backgroundImage: 'radial-gradient(circle at 15% 30%, rgba(30, 27, 75, 0.4), transparent 50%), radial-gradient(circle at 85% 70%, rgba(15, 23, 42, 0.6), transparent 50%)' }} />
      <div className="absolute inset-0 z-0 mix-blend-overlay pointer-events-none opacity-[0.03]"
           style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }} />

      {isPerfectWeek && <ParticleSystem />}

      {/* FILTRO GOOEY (Liquid) PARA LA ISLA DINÁMICA */}
      <svg style={{ position: 'absolute', width: 0, height: 0 }}>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
          <feBlend in="SourceGraphic" in2="goo" />
        </filter>
      </svg>

      {/* TOAST FLOTANTE: Neuro-protección */}
      {floatingMessage.visible && (
        <div className="fixed top-28 left-1/2 transform -translate-x-1/2 z-[70] animate-toast-pop pointer-events-none">
          <div className="bg-emerald-950/80 border border-emerald-500/50 text-emerald-400 px-5 py-2.5 rounded-full backdrop-blur-md shadow-[0_0_20px_rgba(16,185,129,0.3)] text-sm font-bold flex items-center gap-2">
            {floatingMessage.icon && <floatingMessage.icon size={16} className="animate-pulse" />}
            {floatingMessage.text}
          </div>
        </div>
      )}

      {/* ISLA DINÁMICA */}
      <div className="fixed top-2 left-0 right-0 z-50 flex justify-center pointer-events-none" style={{ filter: 'url(#goo)' }}>
        <MagneticWrapper strength={0.2} className="pointer-events-auto">
          <div 
            onPointerDown={handleIslandTouchStart}
            onPointerUp={handleIslandTouchEnd}
            onPointerLeave={handleIslandTouchEnd}
            onClick={islandExpanded ? toggleIsland : undefined}
            onContextMenu={(e) => e.preventDefault()} 
            className={islandBaseStyle}
          >
            {!islandExpanded && (
              <div className="flex items-center gap-2 text-xs font-bold tracking-wide animate-fade-in relative z-20">
                <span className={isPerfectWeek ? 'text-amber-400' : 'text-amber-500'}><Sun size={12} /></span>
                <span>{morningDoneCount}/{morningSups.length}</span>
              </div>
            )}

            {islandExpanded && (
              <div className="w-full flex flex-col gap-4 animate-fade-in relative z-20">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm font-semibold text-slate-400">Pendiente Hoy</span>
                </div>
                
                {pendingSups.length === 0 ? (
                  <div className="text-center py-4 text-amber-400 font-bold flex flex-col items-center gap-2">
                    <Trophy size={32} />
                    <span>¡Sistema Optimizado!</span>
                    <span className="text-xs text-slate-400 font-normal">Uptime del 100%</span>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {pendingSups.slice(0, 3).map(sup => {
                      const SupIcon = ICON_MAP[sup.iconKey]; 
                      return (
                        <div key={sup.id} className="flex items-center gap-3">
                          <div className={`p-1.5 rounded-full ${sup.period === 'morning' ? 'bg-amber-500/20 text-amber-400' : 'bg-indigo-500/20 text-indigo-400'}`}>
                             <SupIcon size={16} /> 
                          </div>
                          <span className="text-sm font-medium">{sup.name}</span>
                        </div>
                      );
                    })}
                    {pendingSups.length > 3 && (
                       <div className="text-xs text-slate-500 text-center pt-2">+{pendingSups.length - 3} más</div>
                    )}
                  </div>
                )}
                <div className="w-12 h-1 bg-slate-700 rounded-full mx-auto mt-2 opacity-50" />
              </div>
            )}
          </div>
        </MagneticWrapper>
      </div>

      <div className="w-full max-w-md bg-[#070A11]/60 min-h-screen relative flex flex-col pt-10 backdrop-blur-3xl z-10 border-x border-white/[0.02]">
        
        {/* MODAL SPEED LIMIT */}
        {showSpeedWarning && (
          <div className="absolute inset-0 z-[60] flex items-center justify-center p-6 bg-red-950/90 backdrop-blur-xl animate-fade-in">
            <div className="bg-[#0f111a] border border-red-500/30 rounded-[2.5rem] p-8 w-full max-w-sm shadow-[0_20px_50px_rgba(220,38,38,0.2)] text-center relative overflow-hidden">
              <div className="absolute inset-0 bg-red-500/5 pointer-events-none" />
              <div className="bg-red-500/10 border border-red-500/20 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 text-red-500 relative z-10">
                <AlertTriangle size={36} />
              </div>
              <h2 className="text-2xl font-bold text-white mb-2 relative z-10">Input Bloqueado</h2>
              <p className="text-slate-400 text-sm mb-8 leading-relaxed relative z-10 font-mono">
                [ERR_RATE_LIMIT]: Múltiples solicitudes en &lt;1.5s interceptadas para prevenir mutaciones accidentales del estado.
              </p>
              <div className="space-y-3 relative z-10">
                <button onClick={undoSpeedLimitAction} className="w-full py-4 rounded-2xl font-bold text-white bg-red-600/90 hover:bg-red-600 active:scale-95 transition-all shadow-[0_0_20px_rgba(220,38,38,0.4)]">
                  Deshacer Operación (Ctrl+Z)
                </button>
                <button onClick={() => setShowSpeedWarning(false)} className="w-full py-3 rounded-2xl font-semibold text-slate-400 bg-white/[0.05] hover:bg-white/[0.1] border border-white/[0.05] active:scale-95 transition-all">
                  Confirmar Ejecución Forzada
                </button>
              </div>
            </div>
          </div>
        )}

        {/* MODAL IOS WIDGET */}
        {showIosGuide && (
          <div className="absolute inset-0 z-[60] flex items-end justify-center bg-black/80 backdrop-blur-xl animate-fade-in sm:items-center p-0 sm:p-6">
            <div className="bg-[#0f111a] w-full rounded-t-[2.5rem] sm:rounded-[2.5rem] p-8 sm:max-w-sm shadow-2xl border-t sm:border border-white/[0.08] flex flex-col max-h-[90vh]">
              <div className="flex justify-between items-center mb-6">
                <div className="flex items-center gap-3 text-indigo-400 bg-indigo-500/10 px-4 py-2 rounded-full border border-indigo-500/20">
                  <Smartphone size={18} />
                  <h2 className="text-sm font-bold tracking-widest uppercase">Widget API (iOS 17+)</h2>
                </div>
                <button onClick={() => setShowIosGuide(false)} className="text-slate-500 hover:text-white p-2 rounded-full bg-white/[0.05]"><X size={18} /></button>
              </div>
              <div className="overflow-y-auto custom-scrollbar flex-1 pr-2 space-y-5 text-sm text-slate-300 leading-relaxed">
                <p>Usa la app <strong className="text-white">Atajos</strong> del iPhone para interactuar con Firebase directamente desde tu pantalla de inicio, sin abrir Safari.</p>
                <div className="bg-white/[0.03] p-5 rounded-2xl border border-white/[0.05] shadow-inner shadow-black">
                  <ol className="list-decimal list-inside space-y-3 font-mono text-[12px]">
                    <li>Abrir app <span className="text-indigo-300">Atajos</span>.</li>
                    <li>Acción: <span className="text-amber-300">"Obtener contenido de URL"</span>.</li>
                    <li>Pegar Webhook: <span className="text-slate-500">https://us-central1-tu-proyecto.cloudfunctions.net/markItem?id=creat&uid={user?.uid || 'XXXX'}</span></li>
                    <li>Método: <span className="text-emerald-400">POST</span></li>
                    <li>Agregar Widget de Atajo pequeño a la pantalla.</li>
                  </ol>
                </div>
              </div>
              <button onClick={() => setShowIosGuide(false)} className="w-full mt-6 py-4 bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 hover:bg-indigo-500/30 hover:text-indigo-200 rounded-2xl font-bold transition-all active:scale-95 shadow-[0_0_15px_rgba(99,102,241,0.15)]">
                Cerrar Documentación
              </button>
            </div>
          </div>
        )}

        {/* HEADER */}
        <header className="pt-8 pb-6 px-6 relative z-10">
          <div className="flex justify-between items-start mb-8">
            <div>
              <h1 className="text-3xl font-bold text-white tracking-tight flex items-center gap-2">
                Init, Nicolás {isPerfectWeek && <Flame className="text-amber-400 animate-pulse" size={24} />}
              </h1>
              {/* INDICADOR DE RED Y SYNC */}
              <div className="flex items-center gap-2 mt-2">
                <div className={`w-1.5 h-1.5 rounded-full ${!isOnline ? 'bg-red-500' : isSyncing ? 'bg-amber-400 animate-pulse' : 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]'}`} />
                <p className="text-slate-400 text-[10px] font-mono uppercase tracking-widest">
                  {new Date().toLocaleDateString('es-AR', { weekday: 'short', day: '2-digit', month: 'short' })} • 
                  <span className={`ml-1 ${!isOnline ? 'text-red-400' : isSyncing ? 'text-amber-400' : 'text-emerald-500'}`}>
                    {!isOnline ? 'OFFLINE_MODE' : isSyncing ? 'SYNCING...' : 'SYNC_OK'}
                  </span>
                </p>
              </div>
            </div>
            <button onClick={() => setShowIosGuide(true)} className="bg-white/[0.03] text-indigo-400 p-3 rounded-2xl border border-white/[0.08] hover:bg-white/[0.08] transition-colors shadow-[0_4px_15px_rgba(0,0,0,0.2)]">
              <Smartphone size={20} />
            </button>
          </div>

          <div className="mb-6 flex items-center justify-between bg-white/[0.02] p-4 rounded-3xl border border-white/[0.05] backdrop-blur-md shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]">
            <div className="flex gap-2">
              {['L','M','M','J','V','S','D'].map((day, i) => {
                const isToday = i === currentDayIndex;
                const isDone = dynamicWeekHistory[i];
                let dotClass = "w-2.5 h-2.5 rounded-full transition-all duration-500 ";
                if (isToday) {
                  dotClass += isDone 
                    ? "bg-cyan-400 shadow-[0_0_12px_rgba(34,211,238,0.8)] scale-110" 
                    : "bg-cyan-500 animate-pulse-fast shadow-[0_0_8px_rgba(6,182,212,0.6)]";
                } else {
                  dotClass += isDone ? "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.3)]" : "bg-slate-700/50 border border-slate-600";
                }
                return (
                  <div key={i} className="flex flex-col items-center gap-2 relative">
                    {isToday && <div className="absolute -top-3 w-1 h-1 bg-cyan-400 rounded-full shadow-[0_0_5px_rgba(34,211,238,0.8)]" />}
                    <span className={`text-[10px] font-bold ${isToday ? 'text-cyan-400 drop-shadow-md' : 'text-slate-500'}`}>{day}</span>
                    <div className={dotClass} />
                  </div>
                );
              })}
            </div>
            {/* HUMANIZACIÓN TEXTO */}
            <span className={`text-[10px] font-mono tracking-widest uppercase ${isPerfectWeek ? 'text-amber-400 font-bold drop-shadow-md' : 'text-slate-400'}`}>
              Ritmo Vital
            </span>
          </div>

          <div className={`rounded-3xl p-6 flex items-center justify-between backdrop-blur-2xl transition-colors shadow-[0_8px_32px_rgba(0,0,0,0.3)] relative overflow-hidden ${isPerfectWeek ? 'bg-amber-900/10 border border-amber-500/30' : 'bg-white/[0.03] border border-white/[0.08] border-t-white/[0.15] border-l-white/[0.15]'}`}>
            <div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent pointer-events-none" />
            <div className="relative z-10">
              <p className={`text-[11px] font-mono tracking-widest uppercase mb-1.5 ${isPerfectWeek ? 'text-amber-400' : 'text-slate-400'}`}>Memoria Diaria</p>
              <p className="text-3xl font-bold text-white font-mono drop-shadow-md">
                [{supplements.filter(s => s.done).length} <span className="text-slate-500/80 text-xl font-medium">/ {supplements.length}]</span>
              </p>
            </div>
            <div className="relative w-16 h-16 z-10 drop-shadow-[0_0_10px_rgba(0,0,0,0.5)]">
              <svg className="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
                <path className="text-slate-800/60" strokeWidth="2.5" stroke="currentColor" fill="none" 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" />
                <path className={`transition-all duration-1000 ease-out ${isPerfectWeek ? 'text-amber-400' : 'text-emerald-400'}`} strokeWidth="2.5" strokeDasharray={`${(supplements.filter(s => s.done).length / supplements.length) * 100}, 100`} strokeLinecap="round" stroke="currentColor" fill="none" 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" />
              </svg>
            </div>
          </div>
        </header>

        {/* LISTA PRINCIPAL (TARJETAS LIQUID GLASS) */}
        <main className="flex-1 overflow-y-auto px-6 pb-12 z-10 custom-scrollbar relative">
          
          <section className="mb-10">
            <div className="flex items-center gap-3 mb-5 px-1">
              <div className="bg-amber-500/10 border border-amber-500/20 p-1.5 rounded-xl text-amber-400 shadow-[0_0_10px_rgba(245,158,11,0.1)]">
                <Sun size={18} />
              </div>
              <h2 className="text-[15px] font-bold text-slate-200 tracking-widest uppercase">Secuencia AM</h2>
              <span className={`ml-auto text-[10px] font-mono px-3 py-1.5 rounded-full border ${isMorningAlertActive ? 'text-red-400 bg-red-900/30 border-red-500/50 animate-pulse' : 'text-slate-400 bg-white/[0.03] border-white/[0.05]'}`}>
                {morningDoneCount}/{morningSups.length}
              </span>
            </div>
            
            {!morningListVisible && morningDoneCount === morningSups.length ? (
              <div className="bg-emerald-900/10 border border-emerald-500/20 rounded-[2rem] p-8 text-center animate-fade-in shadow-[0_8px_32px_rgba(16,185,129,0.05)] backdrop-blur-md relative overflow-hidden">
                <div className="absolute inset-0 bg-gradient-to-t from-emerald-500/5 to-transparent pointer-events-none" />
                <Trophy className="mx-auto text-emerald-400 mb-4 drop-shadow-[0_0_15px_rgba(16,185,129,0.5)]" size={40} />
                <h3 className="text-xl font-bold text-emerald-400 mb-2 tracking-wide">// Inicialización OK.</h3>
                <p className="text-slate-400 text-sm mb-6 font-mono">Hardware optimizado. Return 0;</p>
                <button onClick={() => setMorningListVisible(true)} className="text-xs font-mono text-emerald-400/80 hover:text-emerald-300 transition-colors bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 px-5 py-2.5 rounded-xl">
                  {'>'} Desplegar Array
                </button>
              </div>
            ) : (
              <div className="space-y-0">
                {sortedMorning.map(sup => <SupplementCard key={sup.id} sup={sup} />)}
              </div>
            )}
          </section>

          <section className="mb-8">
             <div className="flex items-center gap-3 mb-5 px-1">
              <div className="bg-indigo-500/10 border border-indigo-500/20 p-1.5 rounded-xl text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.1)]">
                <Moon size={18} />
              </div>
              <h2 className="text-[15px] font-bold text-slate-200 tracking-widest uppercase">Secuencia PM</h2>
              <span className="ml-auto text-[10px] font-mono text-slate-400 bg-white/[0.03] px-3 py-1.5 rounded-full border border-white/[0.05]">
                {nightDoneCount}/{nightSups.length}
              </span>
            </div>

            {!nightListVisible && nightDoneCount === nightSups.length ? (
              <div className="bg-indigo-900/10 border border-indigo-500/20 rounded-[2rem] p-8 text-center animate-fade-in shadow-[0_8px_32px_rgba(99,102,241,0.05)] backdrop-blur-md relative overflow-hidden">
                <div className="absolute inset-0 bg-gradient-to-t from-indigo-500/5 to-transparent pointer-events-none" />
                <Moon className="mx-auto text-indigo-400 mb-4 drop-shadow-[0_0_15px_rgba(99,102,241,0.5)]" size={40} />
                <h3 className="text-xl font-bold text-indigo-400 mb-2 tracking-wide">Modo Suspensión.</h3>
                <p className="text-slate-400 text-sm mb-6 font-mono">Ciclo de recuperación de RAM activado.</p>
                <button onClick={() => setNightListVisible(true)} className="text-xs font-mono text-indigo-400/80 hover:text-indigo-300 transition-colors bg-indigo-500/10 hover:bg-indigo-500/20 border border-indigo-500/20 px-5 py-2.5 rounded-xl">
                  {'>'} Desplegar Array
                </button>
              </div>
            ) : (
              <div className="space-y-0">
                {sortedNight.map(sup => <SupplementCard key={sup.id} sup={sup} />)}
              </div>
            )}
          </section>

          {/* AUDITORÍA Y TERMINAL (DISEÑO INTEGRADO) */}
          <div className="mt-8 pt-8 border-t border-white/[0.05]">
            <button onClick={() => setShowAudit(!showAudit)} className="flex items-center justify-between w-full text-left text-[11px] text-slate-500 uppercase tracking-widest font-bold focus:outline-none hover:text-slate-400 transition-colors px-2">
              <span>System Logs</span>
              {showAudit ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
            </button>
            {showAudit && (
              <div className="mt-4 bg-black/40 p-5 rounded-2xl border border-white/[0.05] max-h-48 overflow-y-auto font-mono text-[10px] custom-scrollbar shadow-inner backdrop-blur-xl">
                {auditTrail.length === 0 ? (
                  <p className="text-emerald-700 animate-pulse">root@nicolas-sys:~$ tail -f /var/log/health.log</p>
                ) : (
                  auditTrail.map((log, index) => (
                    <div key={index} className="flex justify-between py-2 border-b border-white/[0.02] last:border-0 hover:bg-white/[0.02] transition-colors px-2 rounded">
                      <span className="text-slate-500/70 min-w-[60px]">{new Date(log.time).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'})}</span>
                      <span className={`font-bold ${log.action === 'MARCADO' ? 'text-emerald-500/80' : log.action.includes('SPEED') ? 'text-red-500/80' : 'text-amber-500/80'}`}>
                        [{log.action}]
                      </span>
                      <span className="text-slate-400/80 truncate w-1/3 text-right">{log.supId}</span>
                    </div>
                  ))
                )}
              </div>
            )}
          </div>
        </main>
      </div>
      
      <style dangerouslySetInnerHTML={{__html: `
        .custom-scrollbar::-webkit-scrollbar { display: none; }
        .custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        
        @keyframes toastPop { 
          0% { opacity: 0; transform: translate(-50%, 20px) scale(0.9); } 
          15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 
          30% { transform: translate(-50%, 0) scale(1); }
          85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
          100% { opacity: 0; transform: translate(-50%, -20px) scale(0.95); } 
        }
        .animate-toast-pop { animation: toastPop 3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        
        @keyframes borderPulse {
            0%, 100% { border-color: rgba(127, 29, 29, 0.8); box-shadow: 0 0 20px rgba(220, 38, 38, 0.3); }
            50% { border-color: rgba(127, 29, 29, 0.2); box-shadow: 0 0 5px rgba(220, 38, 38, 0.05); }
        }
        .animate-border-pulse { animation: borderPulse 3s ease-in-out infinite; border: 1px solid transparent; }

        @keyframes pulseFast {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.85); }
        }
        .animate-pulse-fast { animation: pulseFast 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

        @keyframes floatUp {
          0% { transform: translateY(0) scale(1); opacity: 0; }
          20% { opacity: 1; }
          80% { opacity: 0.8; }
          100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
        }
      `}} />
    </div>
  );
}