import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { 
  Dumbbell, 
  User, 
  Lock, 
  ChevronRight, 
  Calendar, 
  Activity, 
  ArrowLeft,
  Flame,
  CheckCircle2,
  Clock,
  Zap,
  Play,
  Pause,
  RotateCcw,
  LogOut
} from 'lucide-react';

const App = () => {
  // --- STATO ---
  const [currentUser, setCurrentUser] = useState(null);
  const [view, setView] = useState('login'); 
  const [selectedExercise, setSelectedExercise] = useState(null);
  
  // Salvataggio dati utenti (Bio e Goal)
  const [userConfigs, setUserConfigs] = useState({});

  // --- DATABASE UTENTI ---
  const validUsers = useMemo(() => ({
    "LEONARDO GREGO": "Leo.G011",
    "LEONARDO THIKA": "Leo.T011",
    "ETTORE GRIGOLLI": "3485541971"
  }), []);

  // --- DOMANDE (10 + 10) ---
  const bioQuestions = [
    { id: 'weight', text: "Qual è il tuo peso attuale (kg)?", type: "number" },
    { id: 'height', text: "Qual è la tua altezza (cm)?", type: "number" },
    { id: 'age', text: "Quanti anni hai?", type: "number" },
    { id: 'experience', text: "Livello di esperienza?", type: "select", options: ["Principiante", "Intermedio", "Avanzato"] },
    { id: 'gender', text: "Genere?", type: "select", options: ["Uomo", "Donna"] },
    { id: 'diet', text: "Stato della tua dieta?", type: "select", options: ["Mantenimento", "Ipercalorica", "Ipocalorica"] },
    { id: 'meals', text: "Pasti al giorno?", type: "number" },
    { id: 'sleep', text: "Ore di sonno medie?", type: "number" },
    { id: 'injuries', text: "Hai infortuni?", type: "select", options: ["Nessuno", "Schiena", "Spalle", "Ginocchia"] },
    { id: 'activity', text: "Attività lavorativa?", type: "select", options: ["Sedentaria", "Attiva", "Fisica"] }
  ];

  const goalQuestions = [
    { id: 'goal', text: "Qual è il tuo scopo?", type: "select", options: ["Massa Muscolare", "Dimagrimento", "Forza", "Resistenza"] },
    { id: 'freq', text: "Giorni di allenamento/settimana?", type: "number" },
    { id: 'duration', text: "Minuti per sessione?", type: "number" },
    { id: 'intensity', text: "Intensità desiderata?", type: "select", options: ["Bassa", "Media", "Alta"] },
    { id: 'focus', text: "Punto carente su cui lavorare?", type: "select", options: ["Braccia", "Gambe", "Core", "Spalle"] },
    { id: 'cardio', text: "Ti piace il cardio?", type: "select", options: ["Sì", "No", "Solo fine sessione"] },
    { id: 'equipment', text: "Dove ti alleni?", type: "select", options: ["Palestra", "Casa (Corpo Libero)", "Casa (Pesi)"] },
    { id: 'supps', text: "Usi integratori?", type: "select", options: ["Sì", "No"] },
    { id: 'tempo', text: "Preferenza esecuzione?", type: "select", options: ["Esplosiva", "Controllata", "Lenta"] },
    { id: 'motivation', text: "Motivazione (1-10)?", type: "number" }
  ];

  const exerciseDB = {
    "BRACCIA": ["Curl Bilanciere", "Hammer Curl", "Dips Panchetta", "Pushdown Fune", "French Press", "Curl Concentrato", "Spider Curl", "Estensioni Manubrio", "Diamond Pushups", "Zottman Curl", "Curl Panca Scott", "Kickback", "Preacher Curl", "Cavi Alti Bicipiti", "Curl Presa Inversa", "Tricipiti Corda", "Piegamenti Stretti", "Curl Elastico", "Skull Crushers", "Drag Curl"],
    "ADDOME": ["Crunch Terra", "Plank", "Leg Raises", "Russian Twist", "Mountain Climber", "V-Ups", "Bicycle Crunch", "Hollow Hold", "Side Plank", "Reverse Crunch", "Flutter Kicks", "Dead Bug", "Toe Touches", "Plank Jack", "Ab Wheel", "Windshield Wipers", "L-Sit", "Hanging Leg Raises", "Spider Plank", "Crunch ai Cavi"],
    "GAMBE": ["Squat Libero", "Affondi Camminati", "Leg Press", "Leg Extension", "Leg Curl", "Stacco Rumeno", "Calf Raise", "Bulgarian Split Squat", "Goblet Squat", "Sumo Squat", "Glute Bridge", "Step Up", "Jump Squat", "Affondi Laterali", "Hack Squat", "Hip Thrust", "Sissy Squat", "Nordic Curl", "Wall Sit", "Box Jump"],
    "ADDOME & DORSO": ["Trazioni", "Rematore Manubrio", "Lat Machine", "Pulley Basso", "Facepull", "Pull Over", "Bent Over Row", "T-Bar Row", "Chin Ups", "Superman Hold", "Panca Piana", "Pushups", "Dips Parallele", "Spinte Inclinate", "Croci Cavi", "Spinte Spalle", "Alzate Laterali", "Alzate Posteriori", "Shrugs", "Iperestensioni"]
  };

  // --- LOGICA DI SUPPORTO ---
  
  const handleLogout = () => {
    setView('login');
    setCurrentUser(null);
  };

  // --- COMPONENTI ---

  const LoginForm = () => {
    const [name, setName] = useState('');
    const [pass, setPass] = useState('');
    const [localErr, setLocalErr] = useState('');

    const onSubmit = (e) => {
      e.preventDefault();
      const n = name.trim().toUpperCase();
      if (validUsers[n] && validUsers[n] === pass) {
        setCurrentUser(n);
        const savedBio = localStorage.getItem(`bio_${n}`);
        setView(savedBio ? 'dashboard' : 'onboarding_bio');
      } else {
        setLocalErr('Username o Password errati.');
      }
    };

    return (
      <div className="flex flex-col items-center justify-center min-h-screen p-6 bg-[#030308] text-white font-sans">
        <div className="w-full max-w-sm p-10 rounded-[2.5rem] bg-white/5 backdrop-blur-2xl border border-white/10 shadow-2xl transition-all">
          <h1 className="text-4xl font-black mb-10 text-center tracking-tighter bg-clip-text text-transparent bg-gradient-to-br from-cyan-400 to-blue-500">LIQUIDFIT</h1>
          <form onSubmit={onSubmit} className="space-y-6">
            <div className="bg-white/5 border border-white/10 rounded-2xl p-1 focus-within:border-cyan-500/50 transition-colors">
              <input 
                type="text"
                className="w-full bg-transparent p-4 outline-none text-sm uppercase tracking-wider"
                placeholder="NOME E COGNOME"
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </div>
            <div className="bg-white/5 border border-white/10 rounded-2xl p-1 focus-within:border-cyan-500/50 transition-colors">
              <input 
                type="password"
                className="w-full bg-transparent p-4 outline-none text-sm"
                placeholder="PASSWORD"
                value={pass}
                onChange={(e) => setPass(e.target.value)}
              />
            </div>
            {localErr && <p className="text-red-400 text-xs text-center font-semibold uppercase tracking-tighter">{localErr}</p>}
            <button type="submit" className="w-full py-5 bg-gradient-to-r from-cyan-600 to-blue-600 rounded-2xl font-black text-xs tracking-widest hover:brightness-110 active:scale-95 transition-all shadow-lg shadow-cyan-900/40">
              ENTRA NEL PROFILO
            </button>
          </form>
        </div>
      </div>
    );
  };

  const Quiz = ({ questions, title, onComplete }) => {
    const [idx, setIdx] = useState(0);
    const [val, setVal] = useState('');
    const q = questions[idx];

    const handleNext = () => {
      const currentAnswers = JSON.parse(localStorage.getItem(`data_${currentUser}`) || '{}');
      currentAnswers[q.id] = val;
      localStorage.setItem(`data_${currentUser}`, JSON.stringify(currentAnswers));

      if (idx < questions.length - 1) {
        setIdx(idx + 1);
        setVal('');
      } else {
        onComplete();
      }
    };

    return (
      <div className="min-h-screen bg-black text-white p-6 flex flex-col items-center justify-center">
        <div className="w-full max-w-lg p-10 rounded-[3rem] bg-white/5 backdrop-blur-3xl border border-white/10 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-cyan-500/10 blur-3xl" />
          <p className="text-[10px] font-mono text-cyan-500 mb-2 uppercase tracking-widest">{title} • {idx + 1} / 10</p>
          <h2 className="text-2xl font-bold mb-10 leading-snug">{q.text}</h2>
          
          <div className="mb-10">
            {q.type === 'select' ? (
              <div className="grid gap-3">
                {q.options.map(o => (
                  <button key={o} onClick={() => setVal(o)} className={`p-4 rounded-2xl border transition-all text-sm font-bold ${val === o ? 'bg-white text-black border-white' : 'bg-white/5 border-white/10'}`}>
                    {o}
                  </button>
                ))}
              </div>
            ) : (
              <input 
                type={q.type}
                autoFocus
                className="w-full bg-transparent border-b-2 border-white/20 py-4 text-3xl outline-none focus:border-cyan-500"
                value={val}
                onChange={e => setVal(e.target.value)}
              />
            )}
          </div>

          <button 
            disabled={!val} 
            onClick={handleNext} 
            className="w-full py-5 bg-white text-black rounded-2xl font-black text-xs tracking-widest disabled:opacity-20 transition-all active:scale-95"
          >
            {idx === 9 ? 'SALVA DATI' : 'AVANTI'}
          </button>
        </div>
      </div>
    );
  };

  const Dashboard = () => (
    <div className="min-h-screen bg-[#050508] text-white p-6">
      <div className="flex justify-between items-center mb-10">
        <div>
          <h1 className="text-2xl font-black tracking-tighter italic">LIQUIDFIT.</h1>
          <p className="text-[10px] text-white/40 font-mono">UTENTE: {currentUser}</p>
        </div>
        <button 
          onClick={handleLogout}
          className="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/20 transition-all active:scale-90 group"
        >
          <User className="w-5 h-5 text-cyan-400 group-hover:scale-110 transition-transform" />
        </button>
      </div>

      <div 
        onClick={() => {
          const g = localStorage.getItem(`goal_${currentUser}`);
          setView(g ? 'daily' : 'onboarding_goal');
        }}
        className="relative w-full p-8 rounded-[2.5rem] bg-gradient-to-br from-cyan-600 to-blue-800 mb-8 overflow-hidden cursor-pointer active:scale-[0.98] transition-all shadow-2xl shadow-cyan-900/30"
      >
        <div className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
        <Calendar className="text-white/20 w-16 h-16 absolute bottom-4 right-4" />
        <h2 className="text-3xl font-black mb-1">DAILY</h2>
        <p className="text-cyan-100 text-xs mb-6 opacity-70 italic tracking-tight">Piano 30 giorni creato per te</p>
        <div className="flex items-center gap-2 bg-white/20 w-fit px-4 py-1 rounded-full text-[10px] font-bold">
           <Zap className="w-3 h-3 fill-current" /> GIORNO 01
        </div>
      </div>

      <h3 className="text-[10px] font-black text-white/40 uppercase tracking-[0.2em] mb-6">Categorie Esercizi</h3>
      <div className="grid grid-cols-2 gap-4">
        {Object.keys(exerciseDB).map(cat => (
          <div 
            key={cat} 
            onClick={() => setView(`cat_${cat}`)}
            className="p-6 rounded-[2rem] bg-white/5 border border-white/10 backdrop-blur-xl hover:bg-white/10 transition-all cursor-pointer group"
          >
            <Dumbbell className="w-5 h-5 text-cyan-500 mb-4 group-hover:scale-110 transition-transform" />
            <p className="text-[10px] font-black leading-tight uppercase tracking-wider">{cat}</p>
          </div>
        ))}
      </div>
    </div>
  );

  const WorkoutDetail = ({ exercise, onBack }) => {
    // Calcolo timer dinamico basato sul profilo e tipo esercizio
    const userData = JSON.parse(localStorage.getItem(`data_${currentUser}`) || '{}');
    const isNovice = userData.experience === 'Principiante';
    const baseTime = isNovice ? 90 : 60; // Più tempo per i principianti
    const [timeLeft, setTimeLeft] = useState(baseTime);
    const [isActive, setIsActive] = useState(false);

    useEffect(() => {
      let interval = null;
      if (isActive && timeLeft > 0) {
        interval = setInterval(() => {
          setTimeLeft((time) => time - 1);
        }, 1000);
      } else if (timeLeft === 0) {
        setIsActive(false);
      }
      return () => clearInterval(interval);
    }, [isActive, timeLeft]);

    const formatTime = (seconds) => {
      const mins = Math.floor(seconds / 60);
      const secs = seconds % 60;
      return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
    };

    return (
      <div className="min-h-screen bg-black text-white p-8 overflow-y-auto">
        <button onClick={onBack} className="p-3 bg-white/5 rounded-2xl mb-8"><ArrowLeft /></button>
        <div className="p-10 rounded-[3rem] bg-white/5 border border-white/10 backdrop-blur-3xl text-center relative overflow-hidden shadow-2xl">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-40 h-40 bg-cyan-500/10 blur-[80px]" />
          <h2 className="text-4xl font-black mb-6 italic uppercase tracking-tighter text-transparent bg-clip-text bg-gradient-to-b from-white to-white/40">{exercise}</h2>
          
          {/* TIMER COMPONENT */}
          <div className="mb-10 p-8 rounded-[2rem] bg-white/5 border border-white/10 relative group">
            <p className="text-[10px] font-black tracking-widest text-cyan-500 mb-4">TIMER RECUPERO</p>
            <div className="text-6xl font-black mb-6 font-mono tracking-tighter">
              {formatTime(timeLeft)}
            </div>
            <div className="flex justify-center gap-4">
              <button 
                onClick={() => setIsActive(!isActive)}
                className={`p-4 rounded-2xl transition-all ${isActive ? 'bg-orange-500' : 'bg-cyan-500'} active:scale-90`}
              >
                {isActive ? <Pause /> : <Play />}
              </button>
              <button 
                onClick={() => { setTimeLeft(baseTime); setIsActive(false); }}
                className="p-4 rounded-2xl bg-white/10 border border-white/10 active:scale-90"
              >
                <RotateCcw />
              </button>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4 mb-10">
            <div className="p-4 rounded-2xl bg-white/5 border border-white/5">
              <p className="text-[10px] text-white/40 mb-1">SERIE</p>
              <p className="text-xl font-bold">4</p>
            </div>
            <div className="p-4 rounded-2xl bg-white/5 border border-white/5">
              <p className="text-[10px] text-white/40 mb-1">REP</p>
              <p className="text-xl font-bold">12-15</p>
            </div>
          </div>
          <p className="text-sm text-white/60 mb-10 leading-relaxed italic px-4">
            Assicurati di mantenere il controllo durante la fase eccentrica. Il timer è impostato su {baseTime}s basato sul tuo profilo {userData.experience || 'Standard'}.
          </p>
          <button onClick={onBack} className="w-full py-5 bg-gradient-to-r from-cyan-600 to-blue-600 rounded-2xl font-black text-xs tracking-[0.2em] shadow-lg shadow-cyan-900/30">SEGNA COMPLETATO</button>
        </div>
      </div>
    );
  };

  const DailyView = () => {
    const days = Array.from({ length: 30 }, (_, i) => i + 1);
    return (
      <div className="min-h-screen bg-[#020205] text-white p-6">
        <header className="flex items-center justify-between mb-10">
          <div className="flex items-center gap-4">
            <button onClick={() => setView('dashboard')} className="p-3 bg-white/5 rounded-2xl"><ArrowLeft /></button>
            <h2 className="text-2xl font-black italic uppercase tracking-tighter">Evolution 30</h2>
          </div>
          <button onClick={handleLogout} className="p-3 bg-white/5 rounded-2xl text-white/40"><LogOut className="w-5 h-5" /></button>
        </header>
        <div className="space-y-4 max-h-[75vh] overflow-y-auto pr-2 custom-scrollbar">
          {days.map(d => (
            <div 
              key={d} 
              onClick={() => { if(d===1) { setSelectedExercise("Full Body Activation"); setView('workout_detail'); }}}
              className={`p-6 rounded-[2rem] border transition-all relative overflow-hidden ${d === 1 ? 'bg-cyan-600 border-cyan-400 cursor-pointer shadow-lg shadow-cyan-500/20 active:scale-95' : 'bg-white/5 border-white/10 opacity-40'}`}
            >
              <div className="flex justify-between items-start mb-2 relative z-10">
                <span className="text-[10px] font-black opacity-60">GIORNO {d.toString().padStart(2, '0')}</span>
                {d === 1 && <Flame className="w-4 h-4" />}
              </div>
              <h4 className="font-bold text-lg relative z-10">{d % 5 === 0 ? 'Rest & Recovery' : 'Hypertrophy Session'}</h4>
              {d === 1 && <p className="text-[10px] font-mono mt-2 text-cyan-100 relative z-10">6 Esercizi • Timer Adattivo</p>}
              <div className="absolute top-0 right-0 w-24 h-24 bg-white/5 blur-2xl rounded-full translate-x-12 -translate-y-12" />
            </div>
          ))}
        </div>
      </div>
    );
  };

  const CategoryList = ({ category }) => (
    <div className="min-h-screen bg-[#050510] text-white p-6">
      <header className="flex items-center justify-between mb-8">
        <button onClick={() => setView('dashboard')} className="p-3 bg-white/5 rounded-2xl"><ArrowLeft /></button>
        <button onClick={handleLogout} className="p-3 bg-white/5 rounded-2xl"><User className="w-5 h-5 text-cyan-500" /></button>
      </header>
      <h2 className="text-4xl font-black mb-10 italic uppercase tracking-tighter">{category}</h2>
      <div className="grid gap-3">
        {exerciseDB[category].map((ex, i) => (
          <div 
            key={i} 
            onClick={() => { setSelectedExercise(ex); setView('workout_detail'); }}
            className="p-5 bg-white/5 border border-white/5 rounded-2xl flex items-center justify-between hover:border-cyan-500/30 transition-all cursor-pointer group active:scale-[0.98]"
          >
            <div className="flex items-center gap-4">
              <span className="text-cyan-500 font-mono text-[10px]">{(i+1).toString().padStart(2, '0')}</span>
              <span className="font-bold text-sm tracking-tight">{ex}</span>
            </div>
            <div className="flex items-center gap-3">
               <Clock className="w-3 h-3 text-white/20" />
               <ChevronRight className="w-4 h-4 opacity-20 group-hover:opacity-100 group-hover:text-cyan-500 transition-all" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  // --- ROUTER ---
  if (view === 'login') return <LoginForm />;
  if (view === 'onboarding_bio') return <Quiz questions={bioQuestions} title="Biometria" onComplete={() => { localStorage.setItem(`bio_${currentUser}`, 'done'); setView('dashboard'); }} />;
  if (view === 'onboarding_goal') return <Quiz questions={goalQuestions} title="Scopo" onComplete={() => { localStorage.setItem(`goal_${currentUser}`, 'done'); setView('daily'); }} />;
  if (view === 'dashboard') return <Dashboard />;
  if (view === 'daily') return <DailyView />;
  if (view === 'workout_detail') return <WorkoutDetail exercise={selectedExercise} onBack={() => setView('dashboard')} />;
  if (view.startsWith('cat_')) return <CategoryList category={view.replace('cat_', '')} />;

  return <LoginForm />;
};

export default App;