import React, { useState, useEffect } from 'react';
import { 
  Dumbbell, Heart, Star, Brain, 
  Plus, CheckCircle2, Trophy, 
  ShoppingBag, Zap, User, 
  TrendingUp, Award, Trash2, 
  Settings, LayoutDashboard, PlusCircle,
  Sparkles, Gift, Package, BarChart3, PieChart, Activity,
  Music, Palette, Book, Coffee, Smile, Edit3, X, Save, 
  Bell, BellRing, AlertTriangle, ChevronRight, List,
  CalendarDays, ChevronLeft, Target
} from 'lucide-react';

const MyLifeProApp = () => {
  // --- PERSISTENCIA Y ESTADO ---
  const [view, setView] = useState('dashboard'); 
  const [editingItem, setEditingItem] = useState(null); 
  const [showFullLog, setShowFullLog] = useState(false);
  const [selectedDetail, setSelectedDetail] = useState(null); // { type: 'area'|'skill'|'task', id: string }
  const [notificationsEnabled, setNotificationsEnabled] = useState(false);
  
  const [data, setData] = useState(() => {
    const saved = localStorage.getItem('mylifepro_final_data');
    if (saved) return JSON.parse(saved);
    return {
      user: { xp: 0, coins: 0, level: 1 },
      inventory: [],
      areas: [
        { id: 'ar_fis', label: 'Física', icon: 'Dumbbell', color: 'blue', xp: 0, level: 1 },
        { id: 'ar_soc', label: 'Socio-emocional', icon: 'Heart', color: 'red', xp: 0, level: 1 },
        { id: 'ar_esp', label: 'Espiritual', icon: 'Star', color: 'yellow', xp: 0, level: 1 },
        { id: 'ar_cog', label: 'Cognitiva', icon: 'Brain', color: 'purple', xp: 0, level: 1 },
      ],
      skills: [
        { id: 'sk_hig', areaId: 'ar_fis', label: 'Higiene', xp: 0, level: 1 },
        { id: 'sk_lec', areaId: 'ar_cog', label: 'Lectura', xp: 0, level: 1 }
      ],
      tasks: [
        { 
          id: 't_1', 
          skillId: 'sk_hig', 
          label: 'Ducha y limpieza', 
          xpReward: 20, coinReward: 10, 
          xpPenalty: 5, coinPenalty: 2, 
          frequency: 'diario', 
          customDays: [], 
          completed: false, 
          totalCompletions: 0, 
          totalFailures: 0 
        }
      ],
      shop: [
        { id: 'sh_1', label: '30 min extra de Juegos', price: 100 }
      ]
    };
  });

  useEffect(() => {
    localStorage.setItem('mylifepro_final_data', JSON.stringify(data));
  }, [data]);

  // --- LÓGICA RPG ---
  const calculateLevel = (xp) => Math.max(1, Math.floor(Math.sqrt(xp / 25)) + 1);
  const xpForNextLevel = (level) => Math.pow(level, 2) * 25;

  const handleAction = (taskId, isSuccess) => {
    const task = data.tasks.find(t => t.id === taskId);
    if (!task || task.completed) return;
    const skill = data.skills.find(s => s.id === task.skillId);
    const areaId = skill.areaId;
    
    setData(prev => {
      const xpChange = isSuccess ? (parseInt(task.xpReward) || 0) : -(parseInt(task.xpPenalty) || 0);
      const coinChange = isSuccess ? (parseInt(task.coinReward) || 0) : -(parseInt(task.coinPenalty) || 0);

      const newSkills = prev.skills.map(s => {
        if (s.id === skill.id) {
          const nx = Math.max(0, s.xp + xpChange);
          return { ...s, xp: nx, level: calculateLevel(nx) };
        }
        return s;
      });

      const newAreas = prev.areas.map(a => {
        if (a.id === areaId) {
          const ax = Math.max(0, a.xp + Math.floor(xpChange * 0.8));
          return { ...a, xp: ax, level: calculateLevel(ax) };
        }
        return a;
      });

      const newUserXp = Math.max(0, prev.user.xp + xpChange);
      const newUserCoins = Math.max(0, prev.user.coins + coinChange);

      return {
        ...prev,
        user: { xp: newUserXp, coins: newUserCoins, level: calculateLevel(newUserXp) },
        skills: newSkills,
        areas: newAreas,
        tasks: prev.tasks.map(t => t.id === taskId ? { 
          ...t, 
          completed: true, 
          totalCompletions: isSuccess ? t.totalCompletions + 1 : t.totalCompletions,
          totalFailures: !isSuccess ? t.totalFailures + 1 : t.totalFailures
        } : t)
      };
    });
  };

  const addNew = (type) => {
    const id = `${type}_${Date.now()}`;
    const item = { id, ...form[type] };
    if (type === 'task') { item.completed = false; item.totalCompletions = 0; item.totalFailures = 0; }
    if (type === 'area' || type === 'skill') { item.xp = 0; item.level = 1; }
    setData(prev => ({ ...prev, [type === 'reward' ? 'shop' : type + 's']: [...prev[type === 'reward' ? 'shop' : type + 's'], item] }));
  };

  const deleteItem = (type, id) => {
    setData(prev => ({ ...prev, [type]: prev[type].filter(item => item.id !== id) }));
  };

  const [form, setForm] = useState({
    area: { label: '', icon: 'Brain', color: 'blue' },
    skill: { label: '', areaId: '' },
    task: { label: '', skillId: '', xpReward: 20, coinReward: 10, xpPenalty: 5, coinPenalty: 2, frequency: 'diario', customDays: [] },
    reward: { label: '', price: 50 }
  });

  // --- UI COMPONENTS ---
  const IconSelector = ({ name, size = 20, className = "" }) => {
    const icons = { Dumbbell, Heart, Star, Brain, Music, Palette, Book, Coffee, Smile };
    const IconComp = icons[name] || Trophy;
    return <IconComp size={size} className={className} />;
  };

  const ProgressBar = ({ current, total, color = "indigo" }) => (
    <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
      <div 
        className={`h-full bg-${color}-500 transition-all duration-700`} 
        style={{ width: `${Math.min(100, (current / total) * 100)}%` }}
      ></div>
    </div>
  );

  return (
    <div className="max-w-md mx-auto min-h-screen bg-slate-50 flex flex-col font-sans pb-28 relative">
      
      {/* HEADER My Life PRO */}
      <header className="bg-slate-900 text-white p-6 rounded-b-[3rem] shadow-2xl relative overflow-hidden shrink-0">
        <div className="absolute top-0 right-0 w-48 h-48 bg-indigo-500/10 rounded-full -mr-24 -mt-24 blur-3xl"></div>
        <div className="flex items-center justify-between mb-5">
          <div className="flex items-center gap-3">
            <div className="w-14 h-14 bg-gradient-to-tr from-indigo-600 to-purple-600 rounded-2xl flex items-center justify-center border border-indigo-400">
              <User size={28} />
            </div>
            <div>
              <h1 className="text-2xl font-black italic tracking-tighter leading-none mb-1 uppercase">My Life PRO</h1>
              <span className="text-[10px] bg-white/10 px-2 py-0.5 rounded-full font-black uppercase border border-white/5 tracking-widest text-indigo-300">Master Level {data.user.level}</span>
            </div>
          </div>
          <div className="bg-yellow-400/10 border border-yellow-400/30 px-4 py-2 rounded-2xl flex items-center gap-2">
            <Zap size={18} className="text-yellow-400 fill-yellow-400" />
            <span className="text-yellow-400 font-black text-xl leading-none">{data.user.coins}</span>
          </div>
        </div>
        <ProgressBar current={data.user.xp % xpForNextLevel(data.user.level)} total={xpForNextLevel(data.user.level)} color="indigo" />
      </header>

      <main className="flex-1 p-5 overflow-y-auto">
        
        {/* VISTA: MUNDO (DASHBOARD) */}
        {view === 'dashboard' && (
          <div className="space-y-6 animate-in fade-in">
            <div className="grid grid-cols-2 gap-4">
              {data.areas.map((area) => (
                <div key={area.id} className="bg-white p-5 rounded-[2.5rem] shadow-lg border border-slate-50">
                  <div className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-3 bg-${area.color}-50 text-${area.color}-500 shadow-inner`}>
                    <IconSelector name={area.icon} size={24} />
                  </div>
                  <div className="font-black text-slate-800 text-sm leading-tight uppercase tracking-tighter">{area.label}</div>
                  <div className="text-[10px] text-slate-400 font-black mb-3 uppercase tracking-widest">NIVEL {area.level}</div>
                  <ProgressBar current={area.xp % 100} total={100} color={area.color} />
                </div>
              ))}
            </div>
          </div>
        )}

        {/* VISTA: MISIONES */}
        {view === 'tasks' && (
          <div className="space-y-4 animate-in slide-in-from-bottom-8">
            <div className="flex justify-between items-center mb-2 px-2 text-slate-400">
              <h2 className="text-xs font-black uppercase tracking-widest">Panel de Control</h2>
              <button onClick={() => setData(prev => ({ ...prev, tasks: prev.tasks.map(t => ({ ...t, completed: false })) }))} className="text-[10px] font-black text-indigo-600 bg-indigo-50 px-4 py-2 rounded-full uppercase tracking-widest border border-indigo-100">Reset Ciclo</button>
            </div>
            {data.tasks.map(task => (
              <div key={task.id} className={`p-6 rounded-[2.8rem] border-2 bg-white ${task.completed ? 'opacity-40 grayscale pointer-events-none' : 'shadow-2xl active:scale-95'}`}>
                <div className="flex items-center gap-4 mb-5">
                  <div className="w-14 h-14 bg-slate-50 rounded-2xl flex items-center justify-center text-indigo-600 shadow-inner"><Zap size={30} /></div>
                  <div className="flex-1">
                    <div className="font-black text-lg italic tracking-tighter leading-none text-slate-800">{task.label}</div>
                    <div className="flex items-center gap-2 mt-1.5">
                      <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest">{data.skills.find(s => s.id === task.skillId)?.label}</span>
                      <span className="text-[8px] px-1.5 py-0.5 rounded font-black uppercase bg-indigo-100 text-indigo-600">{task.frequency}</span>
                    </div>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <button onClick={() => handleAction(task.id, true)} className="bg-green-500 text-white py-4 rounded-3xl font-black text-xs uppercase shadow-xl shadow-green-500/20 active:bg-green-600">Completar</button>
                  <button onClick={() => handleAction(task.id, false)} className="bg-red-100 text-red-600 py-4 rounded-3xl font-black text-xs uppercase active:bg-red-100">Fallar</button>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* VISTA: ANALIZAR (RANKINGS E INTERACCIÓN) */}
        {view === 'analytics' && !selectedDetail && (
          <div className="space-y-8 animate-in slide-in-from-bottom-8 duration-500">
            <div className="flex justify-between items-center px-2">
              <h2 className="text-xl font-black text-slate-800 italic flex items-center gap-2 tracking-tighter uppercase">
                <BarChart3 className="text-indigo-600" /> Inteligencia PRO
              </h2>
              <button onClick={() => setShowFullLog(true)} className="p-2 bg-slate-900 text-white rounded-xl shadow-lg"><List size={18}/></button>
            </div>

            {/* TOP ÁREAS */}
            <section className="space-y-4">
              <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-2">Top Áreas de Dominio</h3>
              <div className="grid grid-cols-1 gap-3">
                {[...data.areas].sort((a,b) => b.xp - a.xp).slice(0, 3).map((area, idx) => (
                  <div 
                    key={area.id} 
                    onClick={() => setSelectedDetail({ type: 'area', id: area.id })}
                    className="bg-white p-5 rounded-[2rem] shadow-sm border border-slate-100 flex items-center justify-between active:scale-95 transition-all"
                  >
                    <div className="flex items-center gap-4">
                      <div className={`w-10 h-10 rounded-xl bg-${area.color}-50 text-${area.color}-500 flex items-center justify-center`}><IconSelector name={area.icon} /></div>
                      <div>
                        <div className="text-sm font-black uppercase text-slate-700">{area.label}</div>
                        <div className="text-[9px] font-black text-slate-300">XP Total: {area.xp}</div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-xs font-black text-indigo-600">Nivel {area.level}</div>
                      <ChevronRight size={16} className="text-slate-200 ml-auto mt-1" />
                    </div>
                  </div>
                ))}
              </div>
            </section>

            {/* TOP HABILIDADES */}
            <section className="space-y-4">
              <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-2">Top 5 Habilidades</h3>
              <div className="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100 space-y-4">
                {[...data.skills].sort((a,b) => b.xp - a.xp).slice(0, 5).map((skill, idx) => (
                  <div 
                    key={skill.id} 
                    onClick={() => setSelectedDetail({ type: 'skill', id: skill.id })}
                    className="flex items-center gap-4 group cursor-pointer"
                  >
                    <span className={`w-7 h-7 flex items-center justify-center rounded-full font-black text-[10px] ${idx === 0 ? 'bg-yellow-400 text-yellow-900' : 'bg-slate-50 text-slate-400'}`}>
                      {idx + 1}
                    </span>
                    <div className="flex-1">
                      <div className="flex justify-between items-end mb-1">
                        <span className="text-sm font-bold text-slate-700 uppercase tracking-tighter italic">{skill.label}</span>
                        <span className="text-[10px] font-black text-indigo-500 uppercase tracking-widest">Lv {skill.level}</span>
                      </div>
                      <ProgressBar current={skill.xp % 100} total={100} color="indigo" />
                    </div>
                    <ChevronRight size={14} className="text-slate-200" />
                  </div>
                ))}
              </div>
            </section>

            {/* TOP TAREAS / MISIONES */}
            <section className="space-y-4">
              <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-2 text-right">Misiones Legendarias</h3>
              <div className="space-y-2">
                {[...data.tasks].sort((a,b) => b.totalCompletions - a.totalCompletions).slice(0, 5).map((task) => (
                  <div 
                    key={task.id} 
                    onClick={() => setSelectedDetail({ type: 'task', id: task.id })}
                    className="bg-slate-900 p-4 rounded-2xl flex items-center justify-between text-white active:bg-slate-800"
                  >
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-white/10 rounded-lg text-yellow-400"><Zap size={16}/></div>
                      <span className="text-sm font-bold italic tracking-tight">{task.label}</span>
                    </div>
                    <div className="flex items-center gap-2">
                       <span className="text-[10px] font-black uppercase text-white/40">Logros:</span>
                       <span className="text-sm font-black text-green-400">{task.totalCompletions}</span>
                    </div>
                  </div>
                ))}
              </div>
            </section>
          </div>
        )}

        {/* VISTA DETALLE DINÁMICA */}
        {selectedDetail && (
          <div className="space-y-6 animate-in zoom-in-95 duration-300">
            <button 
              onClick={() => setSelectedDetail(null)}
              className="flex items-center gap-2 text-xs font-black text-slate-400 uppercase tracking-widest hover:text-indigo-600 transition-colors"
            >
              <ChevronLeft size={16} /> Volver a Analizar
            </button>

            {/* DETALLE ÁREA */}
            {selectedDetail.type === 'area' && (() => {
              const area = data.areas.find(a => a.id === selectedDetail.id);
              const areaSkills = data.skills.filter(s => s.areaId === area.id);
              return (
                <div className="space-y-6">
                  <div className={`p-8 rounded-[3rem] bg-${area.color}-600 text-white shadow-xl relative overflow-hidden`}>
                    <IconSelector name={area.icon} size={80} className="absolute right-[-20px] bottom-[-20px] opacity-10 rotate-12" />
                    <h2 className="text-3xl font-black italic uppercase tracking-tighter mb-1">{area.label}</h2>
                    <p className="text-sm font-black opacity-60 tracking-widest uppercase">Área Maestra Nivel {area.level}</p>
                    <div className="mt-4 flex gap-4">
                      <div className="bg-white/10 px-4 py-2 rounded-2xl backdrop-blur-md">
                        <div className="text-[10px] font-black opacity-50 uppercase">XP Total</div>
                        <div className="text-xl font-black">{area.xp}</div>
                      </div>
                      <div className="bg-white/10 px-4 py-2 rounded-2xl backdrop-blur-md">
                        <div className="text-[10px] font-black opacity-50 uppercase">Skills</div>
                        <div className="text-xl font-black">{areaSkills.length}</div>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-3 px-2">
                    <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Habilidades Vinculadas</h3>
                    {areaSkills.map(s => (
                      <div key={s.id} onClick={() => setSelectedDetail({type: 'skill', id: s.id})} className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 flex justify-between items-center active:bg-slate-50">
                        <span className="font-bold text-slate-700 text-sm">{s.label}</span>
                        <span className="text-xs font-black text-indigo-500 italic">LVL {s.level}</span>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })()}

            {/* DETALLE HABILIDAD */}
            {selectedDetail.type === 'skill' && (() => {
              const skill = data.skills.find(s => s.id === selectedDetail.id);
              const parentArea = data.areas.find(a => a.id === skill.areaId);
              const skillTasks = data.tasks.filter(t => t.skillId === skill.id);
              return (
                <div className="space-y-6">
                   <div className="bg-white p-8 rounded-[3rem] shadow-xl border-t-8 border-indigo-600">
                    <div className="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">{parentArea.label}</div>
                    <h2 className="text-2xl font-black italic uppercase text-slate-800 tracking-tighter">{skill.label}</h2>
                    <div className="mt-4 flex items-center justify-between">
                       <span className="text-sm font-black text-slate-400">Progreso de Nivel {skill.level}</span>
                       <span className="text-sm font-black text-indigo-600">{skill.xp % 100}%</span>
                    </div>
                    <div className="mt-2 h-4 w-full bg-slate-100 rounded-full overflow-hidden shadow-inner">
                      <div className="h-full bg-indigo-500" style={{ width: `${skill.xp % 100}%` }}></div>
                    </div>
                  </div>

                  <div className="space-y-3 px-2">
                    <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Misiones que la alimentan</h3>
                    {skillTasks.map(t => (
                      <div key={t.id} onClick={() => setSelectedDetail({type: 'task', id: t.id})} className="bg-slate-900 p-4 rounded-2xl flex justify-between items-center group active:scale-95 transition-all cursor-pointer">
                        <span className="text-white font-bold text-sm italic">{t.label}</span>
                        <div className="flex gap-2">
                          <span className="text-green-400 text-[10px] font-black">✔ {t.totalCompletions}</span>
                          <span className="text-red-400 text-[10px] font-black">✖ {t.totalFailures}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })()}

            {/* DETALLE TAREA */}
            {selectedDetail.type === 'task' && (() => {
              const task = data.tasks.find(t => t.id === selectedDetail.id);
              const total = (task.totalCompletions || 0) + (task.totalFailures || 0);
              const successRate = total === 0 ? 0 : Math.round((task.totalCompletions / total) * 100);
              return (
                <div className="space-y-6">
                  <div className="bg-slate-900 p-8 rounded-[3rem] text-white shadow-2xl">
                    <Target className="text-yellow-400 mb-4" size={40} />
                    <h2 className="text-2xl font-black italic uppercase tracking-tighter mb-1">{task.label}</h2>
                    <p className="text-xs font-bold text-white/40 uppercase tracking-[0.2em]">{task.frequency}</p>
                    
                    <div className="grid grid-cols-2 gap-4 mt-8">
                       <div className="bg-white/5 p-4 rounded-2xl border border-white/10 text-center">
                          <div className="text-[10px] font-black text-green-400 uppercase mb-1">Éxitos</div>
                          <div className="text-3xl font-black text-white">{task.totalCompletions}</div>
                       </div>
                       <div className="bg-white/5 p-4 rounded-2xl border border-white/10 text-center">
                          <div className="text-[10px] font-black text-red-400 uppercase mb-1">Fallos</div>
                          <div className="text-3xl font-black text-white">{task.totalFailures}</div>
                       </div>
                    </div>
                  </div>

                  <div className="bg-white p-7 rounded-[3rem] shadow-sm border border-slate-100 text-center">
                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 italic">Ratio de Disciplina</div>
                    <div className="relative inline-flex items-center justify-center">
                       <svg className="w-32 h-32 transform -rotate-90">
                          <circle cx="64" cy="64" r="58" stroke="currentColor" strokeWidth="12" fill="transparent" className="text-slate-100" />
                          <circle cx="64" cy="64" r="58" stroke="currentColor" strokeWidth="12" fill="transparent" strokeDasharray={364.42} strokeDashoffset={364.42 - (364.42 * successRate) / 100} className="text-indigo-500" strokeLinecap="round" />
                       </svg>
                       <span className="absolute text-2xl font-black text-indigo-600">{successRate}%</span>
                    </div>
                  </div>
                </div>
              );
            })()}
          </div>
        )}

        {/* MODAL: REGISTRO MAESTRO (DATA LOG) */}
        {showFullLog && (
          <div className="fixed inset-0 bg-slate-950 z-[200] p-6 flex flex-col animate-in slide-in-from-bottom duration-500 overflow-hidden">
            <div className="flex justify-between items-center mb-8">
              <h2 className="text-white text-2xl font-black italic uppercase tracking-tighter">DATA LOGBOOK</h2>
              <button onClick={() => setShowFullLog(false)} className="bg-white/10 p-3 rounded-full text-white"><X size={24}/></button>
            </div>
            <div className="flex-1 overflow-y-auto space-y-10 pr-2">
              {data.areas.map(area => (
                <div key={area.id} className="space-y-5">
                  <div className="flex items-center gap-3 border-b-2 border-white/5 pb-3">
                    <IconSelector name={area.icon} className={`text-${area.color}-400`} size={24} />
                    <span className="text-white font-black uppercase text-sm tracking-widest">{area.label}</span>
                    <span className="ml-auto text-[10px] font-black text-white/30 italic">Lvl {area.level}</span>
                  </div>
                  {data.skills.filter(s => s.areaId === area.id).map(skill => (
                    <div key={skill.id} className="bg-white/5 p-5 rounded-[2.5rem] border border-white/5">
                      <div className="flex justify-between items-center mb-4">
                        <span className="text-white font-bold tracking-tight text-lg italic">{skill.label}</span>
                        <span className="text-indigo-400 font-black text-xs uppercase italic">Lv {skill.level}</span>
                      </div>
                      <div className="space-y-3 pl-4">
                        {data.tasks.filter(t => t.skillId === skill.id).map(task => (
                          <div key={task.id} className="flex items-center justify-between text-[11px] border-l-2 border-white/10 pl-4 py-1">
                            <span className="text-white/50 font-medium">{task.label}</span>
                            <div className="flex gap-4 font-black">
                              <span className="text-green-400">✔ {task.totalCompletions}</span>
                              <span className="text-red-400">✖ {task.totalFailures}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* VISTA: TIENDA */}
        {view === 'shop' && (
          <div className="space-y-6 animate-in slide-in-from-bottom-8">
            <div className="bg-gradient-to-r from-yellow-400 to-orange-400 rounded-[2.8rem] p-8 text-yellow-950 shadow-2xl relative overflow-hidden">
              <h2 className="text-3xl font-black italic tracking-tighter mb-1">PRO SHOP</h2>
              <p className="text-xs font-black uppercase tracking-widest opacity-80">Mercado de Recompensas</p>
            </div>
            <div className="grid grid-cols-1 gap-4">
              {data.shop.map(item => (
                <div key={item.id} className="bg-white p-6 rounded-[2.8rem] flex items-center justify-between border border-slate-50 shadow-xl">
                  <div className="flex items-center gap-4">
                    <div className="w-14 h-14 bg-pink-50 text-pink-500 rounded-2xl flex items-center justify-center shadow-inner"><Gift size={28} /></div>
                    <span className="font-black text-slate-800 text-lg italic">{item.label}</span>
                  </div>
                  <button onClick={() => { if(data.user.coins >= item.price) buyItem(item.id); }} disabled={data.user.coins < item.price} className={`px-6 py-4 rounded-3xl font-black text-[10px] uppercase tracking-[0.2em] transition-all ${data.user.coins >= item.price ? 'bg-slate-900 text-white shadow-xl active:scale-90' : 'bg-slate-100 text-slate-400'}`}>
                    {item.price} MON
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* VISTA: ADMIN (CONFIGURACIÓN) */}
        {view === 'admin' && (
          <div className="space-y-8 animate-in fade-in pb-20 px-2">
            
            <div className="bg-white p-7 rounded-[3rem] border-2 border-slate-100 shadow-xl">
              <h2 className="font-black text-slate-800 flex items-center gap-2 mb-4 italic tracking-tight uppercase text-sm"><Bell size={20} className="text-indigo-500"/> Notificaciones PRO</h2>
              <button 
                onClick={async () => {
                  const p = await Notification.requestPermission();
                  if (p === 'granted') setNotificationsEnabled(true);
                }}
                className={`w-full p-4 rounded-3xl flex items-center justify-between transition-all ${notificationsEnabled ? 'bg-green-100 text-green-600' : 'bg-indigo-600 text-white shadow-xl'}`}
              >
                <span className="font-black text-xs uppercase tracking-widest">{notificationsEnabled ? 'Alertas Activas' : 'Activar Notificaciones'}</span>
                <BellRing size={20} />
              </button>
            </div>

            <div className="bg-blue-600 p-8 rounded-[3.5rem] text-white shadow-2xl">
              <h2 className="font-black flex items-center gap-3 mb-6 uppercase italic tracking-tighter text-sm"><LayoutDashboard size={24}/> Nueva Área</h2>
              <div className="space-y-5">
                <input type="text" placeholder="Nombre (ej. Finanzas...)" className="w-full bg-white/10 border border-white/20 rounded-2xl p-5 text-sm font-bold" value={form.area.label} onChange={e => setForm({...form, area: {...form.area, label: e.target.value}})} />
                <div className="flex flex-col gap-3">
                  <span className="text-[10px] font-black uppercase text-blue-200 tracking-widest">Elige Icono</span>
                  <div className="flex gap-2 overflow-x-auto pb-4">
                    {['Brain', 'Dumbbell', 'Heart', 'Star', 'Music', 'Palette', 'Book', 'Coffee', 'Smile'].map(ic => (
                      <button key={ic} onClick={() => setForm({...form, area: {...form.area, icon: ic}})} className={`p-3 rounded-2xl transition-all border-2 ${form.area.icon === ic ? 'bg-white text-blue-600 border-white' : 'bg-white/10 border-white/20'}`}><IconSelector name={ic} /></button>
                    ))}
                  </div>
                </div>
                <button onClick={() => addNew('area')} className="w-full bg-white text-blue-600 py-5 rounded-[2rem] font-black uppercase tracking-[0.2em]">Crear Área</button>
              </div>
            </div>

            <div className="bg-indigo-950 p-8 rounded-[3.5rem] text-white shadow-2xl">
              <h2 className="font-black flex items-center gap-3 mb-6 uppercase italic tracking-tighter text-sm"><PlusCircle size={24}/> Nueva Habilidad</h2>
              <div className="space-y-5">
                <input type="text" placeholder="Nombre Habilidad..." className="w-full bg-white/10 border border-white/20 rounded-2xl p-5 text-sm font-bold" value={form.skill.label} onChange={e => setForm({...form, skill: {...form.skill, label: e.target.value}})} />
                <select className="w-full bg-white/10 border border-white/20 rounded-2xl p-5 text-sm font-bold" value={form.skill.areaId} onChange={e => setForm({...form, skill: {...form.skill, areaId: e.target.value}})}>
                  <option value="">¿A qué Área pertenece?</option>
                  {data.areas.map(a => <option key={a.id} value={a.id}>{a.label}</option>)}
                </select>
                <button onClick={() => addNew('skill')} className="w-full bg-indigo-500 py-5 rounded-[2rem] font-black uppercase tracking-widest">Crear Skill</button>
              </div>
            </div>

            <div className="bg-white p-8 rounded-[3.5rem] border-2 border-slate-100 shadow-xl">
              <h2 className="font-black text-slate-800 flex items-center gap-3 mb-6 italic tracking-tighter uppercase text-sm"><Zap size={22} className="text-indigo-600"/> Nueva Misión PRO</h2>
              <div className="space-y-5">
                <input type="text" placeholder="¿Qué debe hacer?" className="w-full bg-slate-50 border rounded-2xl p-5 text-sm font-bold" value={form.task.label} onChange={e => setForm({...form, task: {...form.task, label: e.target.value}})} />
                <div className="grid grid-cols-2 gap-3">
                  <select className="bg-slate-50 border rounded-2xl p-4 text-[10px] font-black uppercase" value={form.task.skillId} onChange={e => setForm({...form, task: {...form.task, skillId: e.target.value}})}>
                    <option value="">¿Habilidad?</option>
                    {data.skills.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
                  </select>
                  <select className="bg-slate-50 border rounded-2xl p-4 text-[10px] font-black uppercase" value={form.task.frequency} onChange={e => setForm({...form, task: {...form.task, frequency: e.target.value}})}>
                    <option value="diario">Diario</option>
                    <option value="personalizado">Personalizado</option>
                    <option value="semanal">Semanal</option>
                  </select>
                </div>
                <button onClick={() => addNew('task')} className="w-full bg-slate-900 text-white py-5 rounded-[2.5rem] font-black uppercase tracking-[0.2em]">Lanzar Misión</button>
              </div>
            </div>

            <div className="bg-white p-6 rounded-[2.5rem] border border-slate-200">
              <h4 className="text-[10px] font-black text-slate-300 uppercase mb-4 tracking-widest">Gestión de Tareas</h4>
              {data.tasks.map(t => (
                <div key={t.id} className="flex justify-between items-center py-3 border-b border-slate-50 last:border-0">
                  <span className="text-xs font-bold text-slate-600">{t.label}</span>
                  <div className="flex gap-3">
                    <button onClick={() => setEditingItem({ type: 'task', id: t.id })} className="text-indigo-400"><Edit3 size={16}/></button>
                    <button onClick={() => deleteItem('tasks', t.id)} className="text-red-300"><Trash2 size={16}/></button>
                  </div>
                </div>
              ))}
            </div>

            <button onClick={() => { if(confirm('¿Reiniciar My Life PRO?')) { localStorage.clear(); window.location.reload(); }}} className="w-full text-red-400 text-[10px] font-black uppercase tracking-[0.4em] pt-8 mb-20 opacity-30 italic">Hard Reset App</button>
          </div>
        )}
      </main>

      {/* NAVEGACIÓN INFERIOR (ESTILO DINÁMICO) */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-3xl border-t border-slate-100 px-2 py-5 flex justify-around items-center rounded-t-[3.5rem] shadow-[0_-15px_60px_rgba(0,0,0,0.1)] z-[150]">
        <button onClick={() => {setView('dashboard'); setSelectedDetail(null);}} className={`flex flex-col items-center gap-1.5 transition-all flex-1 ${view === 'dashboard' ? 'text-indigo-600 scale-110' : 'text-slate-300'}`}>
          <Award size={24} className={view === 'dashboard' ? 'fill-indigo-100' : ''} />
          <span className="text-[7px] font-black uppercase tracking-widest italic">Mundo</span>
        </button>
        <button onClick={() => {setView('tasks'); setSelectedDetail(null);}} className={`flex flex-col items-center gap-1.5 transition-all flex-1 ${view === 'tasks' ? 'text-indigo-600 scale-110' : 'text-slate-300'}`}>
          <Zap size={24} className={view === 'tasks' ? 'fill-indigo-100' : ''} />
          <span className="text-[7px] font-black uppercase tracking-widest italic">Misiones</span>
        </button>
        <button onClick={() => {setView('analytics'); setSelectedDetail(null);}} className={`flex flex-col items-center gap-1.5 transition-all flex-1 ${view === 'analytics' ? 'text-indigo-600 scale-110' : 'text-slate-300'}`}>
          <BarChart3 size={24} className={view === 'analytics' ? 'fill-indigo-100' : ''} />
          <span className="text-[7px] font-black uppercase tracking-widest italic">Analizar</span>
        </button>
        <button onClick={() => {setView('shop'); setSelectedDetail(null);}} className={`flex flex-col items-center gap-1.5 transition-all flex-1 ${view === 'shop' ? 'text-indigo-600 scale-110' : 'text-slate-300'}`}>
          <ShoppingBag size={24} className={view === 'shop' ? 'fill-indigo-100' : ''} />
          <span className="text-[7px] font-black uppercase tracking-widest italic">Tienda</span>
        </button>
        <button onClick={() => {setView('admin'); setSelectedDetail(null);}} className={`flex flex-col items-center gap-1.5 transition-all flex-1 ${view === 'admin' ? 'text-indigo-600 scale-110' : 'text-slate-300'}`}>
          <Settings size={24} />
          <span className="text-[7px] font-black uppercase tracking-widest italic">Admin</span>
        </button>
      </nav>
    </div>
  );
};

export default MyLifeProApp;