import React, { useState } from 'react';
import { 
  Calendar, 
  BookOpen, 
  Layout, 
  MessageCircle, 
  Lock, 
  CheckCircle2, 
  ChevronRight,
  Zap,
  Leaf,
  Moon,
  Sun,
  Clock,
  Utensils,
  Plus,
  Trash2,
  Newspaper,
  HelpCircle
} from 'lucide-react';

/**
 * Application Cyklera - Version Ultra-Stable
 * Suppression de tous les accents pour eviter les erreurs d'encodage
 */
const App = () => {
  // Etats de l'application
  const [activeTab, setActiveTab] = useState('program');
  const [currentPhaseIdx, setCurrentPhaseIdx] = useState(1);
  const [unlockedSessions, setUnlockedSessions] = useState([0]); 
  const [plannedItems, setPlannedItems] = useState([]);

  // Definition des donnees (Texte sans aucun accent pour une compatibilite maximale)
  const phases = [
    {
      id: 0,
      name: "Phase Menstruelle",
      duration: 8,
      icon: <Moon className="w-5 h-5" />,
      nutriGoal: "Remineralisation et soutien du fer. Privilegiez le chaud.",
      dayType: { breakfast: "Porridge chaud", lunch: "Soupe de lentilles", snack: "Chocolat noir", dinner: "Bouillon d'os" },
      sessions: ["Seance 01", "Seance 02"],
      recipes: ["Bouillon d'os", "Infusion Framboisier", "Dahl de lentilles"],
      progress: 85
    },
    {
      id: 1,
      name: "Phase Folliculaire et Ovulatoire",
      duration: 14,
      icon: <Sun className="w-5 h-5" />,
      nutriGoal: "Vitalite et metabolisme des oestrogenes. Focus fibres.",
      dayType: { breakfast: "Smoothie Vert", lunch: "Salade Quinoa", snack: "Yaourt Coco", dinner: "Saumon Asperges" },
      sessions: ["Seance 01", "Seance 02", "Seance 03", "Seance 04", "Seance 05", "Seance 06"],
      recipes: ["Buddha Bowl", "Smoothie Eclat", "Salade Detox"],
      progress: 45
    },
    {
      id: 2,
      name: "Phase Luteale",
      duration: 16,
      icon: <Leaf className="w-5 h-5" />,
      nutriGoal: "Stabilisation de la glycemie et magnesium.",
      dayType: { breakfast: "Oeufs et Avocat", lunch: "Poulet et Patate douce", snack: "Muffins Banane", dinner: "Curry de pois chiches" },
      sessions: ["Seance 01", "Seance 02", "Seance 03", "Seance 04", "Seance 05", "Seance 06"],
      recipes: ["Curry Coco", "Muffins Noix", "Veloute Courge"],
      progress: 15
    }
  ];

  const currentPhase = phases[currentPhaseIdx];

  const toggleSession = (idx) => {
    if (idx === 0 || unlockedSessions.includes(idx - 1)) {
      if (unlockedSessions.includes(idx)) {
        if (!unlockedSessions.includes(idx + 1)) {
          setUnlockedSessions(unlockedSessions.filter(i => i !== idx));
        }
      } else {
        setUnlockedSessions([...unlockedSessions, idx]);
      }
    }
  };

  return (
    <div className="min-h-screen bg-[#FDFBF9] text-[#2D2A26] font-sans pb-12">
      
      {/* Barre de navigation */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-[#F1E9E0] px-6 py-4">
        <div className="max-w-7xl mx-auto flex flex-col lg:flex-row justify-between items-center gap-6">
          <h1 className="text-xl font-light tracking-[0.4em] uppercase">Cyklera</h1>
          
          <div className="flex gap-4 md:gap-8 overflow-x-auto no-scrollbar w-full lg:w-auto justify-center">
            {[
              { id: 'program', label: 'Programme', icon: <Layout size={14}/> },
              { id: 'journal', label: 'Journal', icon: <Calendar size={14}/> },
              { id: 'academy', label: 'Academie', icon: <BookOpen size={14}/> },
              { id: 'faq', label: 'FAQ', icon: <HelpCircle size={14}/> },
              { id: 'news', label: 'Actualites', icon: <Newspaper size={14}/> },
            ].map((tab) => (
              <button 
                key={tab.id}
                onClick={() => setActiveTab(tab.id)} 
                className={`flex items-center gap-2 text-[9px] uppercase font-bold tracking-widest pb-1 border-b-2 transition-all ${
                  activeTab === tab.id ? 'border-[#D4B996] text-[#2D2A26]' : 'border-transparent text-neutral-400'
                }`}
              >
                {tab.icon} {tab.label}
              </button>
            ))}
          </div>
        </div>
      </nav>

      <main className="max-w-6xl mx-auto p-6 md:p-12">
        
        {activeTab === 'program' && (
          <div className="space-y-12">
            {/* Carte de phase principale */}
            <div className="bg-white p-10 rounded-[3rem] border border-[#F1E9E0] shadow-sm flex flex-col md:flex-row justify-between items-end gap-8">
                <div className="flex items-center gap-6">
                    <div className="p-4 rounded-3xl bg-[#FAF9F7] text-[#D4B996]">
                        {currentPhase.icon}
                    </div>
                    <div>
                        <span className="text-[10px] uppercase tracking-[0.3em] font-bold text-[#D4B996]">Phase Actuelle</span>
                        <h2 className="text-4xl font-serif">{currentPhase.name}</h2>
                    </div>
                </div>
                <div className="w-full md:w-80 space-y-3">
                    <div className="flex justify-between text-[10px] uppercase font-bold text-neutral-400 tracking-widest">
                        <span>Progression</span>
                        <span>Jours totaux: {currentPhase.duration}</span>
                    </div>
                    <div className="h-2 w-full bg-neutral-100 rounded-full overflow-hidden">
                        <div className="h-full bg-[#D4B996] transition-all duration-1000" style={{ width: `${currentPhase.progress}%` }}></div>
                    </div>
                    <p className="text-[9px] italic text-neutral-400 text-right">Fin de phase estimee bientot</p>
                </div>
            </div>

            {/* Selecteur de phases */}
            <div className="bg-white border-b border-neutral-100 px-2 overflow-x-auto no-scrollbar rounded-2xl">
              <div className="flex gap-10">
                {phases.map((phase, idx) => (
                  <button
                    key={phase.id}
                    onClick={() => {setCurrentPhaseIdx(idx); setUnlockedSessions([0]);}}
                    className={`py-4 text-[9px] uppercase tracking-[0.2em] font-bold border-b-2 transition-all whitespace-nowrap ${
                      currentPhaseIdx === idx ? 'border-[#D4B996] text-[#2D2A26]' : 'border-transparent text-neutral-300'
                    }`}
                  >
                    {phase.name}
                  </button>
                ))}
              </div>
            </div>

            {/* Section Sport / Mouvement */}
            <section>
              <h3 className="text-2xl font-serif mb-8">Mouvement</h3>
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                {currentPhase.sessions.map((session, idx) => {
                  const isLocked = idx > 0 && !unlockedSessions.includes(idx - 1);
                  const isCompleted = unlockedSessions.includes(idx);
                  return (
                    <div key={idx} className={`relative p-6 rounded-3xl border text-center transition-all ${isLocked ? 'bg-neutral-50 opacity-40' : 'bg-white border-[#F1E9E0] shadow-sm'}`}>
                      <span className="text-[10px] uppercase font-bold text-[#D4B996] mb-4 block tracking-tighter">{session}</span>
                      <div className="flex flex-col items-center gap-4">
                        {isLocked ? <Lock size={16} className="text-neutral-300"/> : (isCompleted ? <CheckCircle2 className="text-[#D4B996]"/> : <div className="w-5 h-5 rounded-full border-2 border-neutral-100"/>)}
                        {!isLocked && !isCompleted && (
                            <button onClick={() => toggleSession(idx)} className="text-[8px] uppercase font-bold text-[#D4B996]">Valider</button>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </section>

            {/* Section Nutrition */}
            <section className="grid grid-cols-1 lg:grid-cols-3 gap-10">
              <div className="lg:col-span-2 space-y-6">
                <h3 className="text-2xl font-serif">Nutrition</h3>
                <div className="bg-white p-8 rounded-[2.5rem] border border-[#F1E9E0] relative overflow-hidden">
                   <h4 className="text-[10px] uppercase font-bold tracking-widest text-[#D4B996] mb-6">Journee Type</h4>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
                      {Object.entries(currentPhase.dayType).map(([key, val]) => (
                        <div key={key}>
                          <span className="text-[8px] uppercase text-neutral-400 font-bold block mb-1">{key}</span>
                          <p className="text-sm font-medium">{val}</p>
                        </div>
                      ))}
                   </div>
                </div>
              </div>
              <div className="space-y-4">
                 <h4 className="text-[10px] uppercase font-bold tracking-widest mb-4">Recettes</h4>
                 {currentPhase.recipes.map((recipe, idx) => (
                    <div key={idx} className="p-4 bg-white border border-neutral-100 rounded-2xl flex justify-between items-center group hover:border-[#D4B996] transition-all">
                      <span className="text-xs font-medium">{recipe}</span>
                      <Plus size={14} className="text-[#D4B996] opacity-0 group-hover:opacity-100"/>
                    </div>
                 ))}
              </div>
            </section>
          </div>
        )}

        {/* Autres onglets */}
        {activeTab !== 'program' && (
          <div className="bg-white p-20 rounded-[3rem] border border-neutral-100 text-center italic text-neutral-400">
             Cette section est en cours de preparation.
          </div>
        )}
      </main>

      <footer className="max-w-6xl mx-auto p-12 text-center border-t border-neutral-100 mt-20">
        <p className="text-[9px] uppercase tracking-[0.4em] text-neutral-300 font-bold">Cyklera - Harmonie et Equilibre</p>
      </footer>
    </div>
  );
};

export default App;