"use client"

import { useState, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import {
  Building2, User, Bell, Shield, CreditCard,
  Camera, Save, Eye, EyeOff, Check, ChevronRight,
  Mail, Phone, MapPin, Globe, Linkedin, Twitter,
  Trash2, AlertTriangle, Lock, Smartphone, Upload
} from "lucide-react"
import BarreLaterale from "@/app/composants/navigation/BarreLaterale"
import BarreSuperieure from "@/app/composants/en-tete/BarreSuperieure"
import { useProfil } from "@/app/contexte/ProfilContext"

type Onglet = "profil" | "entreprise" | "notifications" | "securite" | "abonnement"

function Champ({ label, type = "text", valeur, onChange, placeholder, icon, disabled = false }: {
  label: string; type?: string; valeur: string; onChange: (v: string) => void
  placeholder?: string; icon?: React.ReactNode; disabled?: boolean
}) {
  return (
    <div className="space-y-1.5">
      <label className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">{label}</label>
      <div className="relative">
        {icon && <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">{icon}</span>}
        <input
          type={type} value={valeur} onChange={e => onChange(e.target.value)}
          placeholder={placeholder} disabled={disabled}
          className={`w-full ${icon ? "pl-10" : "pl-4"} pr-4 py-3 text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800 focus:border-blue-400 transition-all ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
        />
      </div>
    </div>
  )
}

function Toggle({ actif, onChange, label, description }: {
  actif: boolean; onChange: (v: boolean) => void; label: string; description?: string
}) {
  return (
    <div className="flex items-center justify-between py-4 border-b border-slate-100 dark:border-slate-800 last:border-0">
      <div>
        <p className="text-sm font-semibold text-slate-900 dark:text-white">{label}</p>
        {description && <p className="text-xs text-slate-400 mt-0.5">{description}</p>}
      </div>
      <button onClick={() => onChange(!actif)} className={`relative w-11 h-6 rounded-full transition-colors ${actif ? "bg-blue-600" : "bg-slate-200 dark:bg-slate-700"}`}>
        <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${actif ? "translate-x-5" : ""}`} />
      </button>
    </div>
  )
}

function SauvegardeToast({ visible }: { visible: boolean }) {
  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          initial={{ opacity: 0, y: 20, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 20, scale: 0.95 }}
          className="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-slate-900 dark:bg-white text-white dark:text-slate-900 px-5 py-3 rounded-2xl shadow-xl"
        >
          <div className="w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center">
            <Check size={13} className="text-white" />
          </div>
          <span className="text-sm font-semibold">Modifications sauvegardées</span>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

// ── Section Profil ────────────────────────────────────────────────
function SectionProfil({ onSave }: { onSave: () => void }) {
  const { profil, mettreAJour } = useProfil()
  const inputRef = useRef<HTMLInputElement>(null)

  const [prenom, setPrenom] = useState(profil.prenom)
  const [nom, setNom]       = useState(profil.nom)
  const [email, setEmail]   = useState(profil.email)
  const [tel, setTel]       = useState(profil.tel)
  const [poste, setPoste]   = useState(profil.poste)
  const [bio, setBio]       = useState(profil.bio)

  const initiales = `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase()

  // Chargement photo réelle
  const chargerPhoto = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    const reader = new FileReader()
    reader.onload = () => {
      mettreAJour({ avatar: reader.result as string })
    }
    reader.readAsDataURL(file)
  }

  const sauvegarder = () => {
    mettreAJour({ prenom, nom, email, tel, poste, bio })
    onSave()
  }

  return (
    <div className="space-y-8">
      {/* Avatar avec upload réel */}
      <div className="flex items-center gap-6">
        <div className="relative">
          {profil.avatar ? (
            <img src={profil.avatar} alt="Avatar" className="w-20 h-20 rounded-2xl object-cover shadow-lg ring-4 ring-blue-100 dark:ring-blue-900" />
          ) : (
            <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-blue-400 to-blue-700 flex items-center justify-center text-white text-2xl font-extrabold shadow-lg">
              {initiales}
            </div>
          )}
          <button
            onClick={() => inputRef.current?.click()}
            className="absolute -bottom-1 -right-1 w-7 h-7 bg-blue-600 rounded-full flex items-center justify-center text-white hover:bg-blue-700 transition-colors shadow-md"
          >
            <Camera size={13} />
          </button>
          <input ref={inputRef} type="file" accept="image/*" onChange={chargerPhoto} className="hidden" />
        </div>
        <div>
          <p className="font-bold text-slate-900 dark:text-white">{prenom} {nom}</p>
          <p className="text-sm text-slate-500">{poste}</p>
          <button onClick={() => inputRef.current?.click()} className="mt-2 flex items-center gap-1.5 text-xs text-blue-600 font-semibold hover:underline">
            <Upload size={12} /> Changer la photo
          </button>
          {profil.avatar && (
            <button onClick={() => mettreAJour({ avatar: null })} className="mt-1 text-xs text-red-500 hover:underline">
              Supprimer la photo
            </button>
          )}
        </div>
      </div>

      <div>
        <h3 className="text-sm font-bold text-slate-900 dark:text-white mb-4">Informations personnelles</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Champ label="Prénom" valeur={prenom} onChange={setPrenom} icon={<User size={15} />} />
          <Champ label="Nom" valeur={nom} onChange={setNom} icon={<User size={15} />} />
          <Champ label="Email professionnel" type="email" valeur={email} onChange={setEmail} icon={<Mail size={15} />} />
          <Champ label="Téléphone" valeur={tel} onChange={setTel} icon={<Phone size={15} />} />
          <Champ label="Poste / Fonction" valeur={poste} onChange={setPoste} icon={<Building2 size={15} />} />
        </div>
        <div className="mt-4 space-y-1.5">
          <label className="text-xs font-bold uppercase tracking-wider text-slate-500">Bio</label>
          <textarea value={bio} onChange={e => setBio(e.target.value)} rows={3}
            className="w-full px-4 py-3 text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-400 transition-all resize-none" />
          <p className="text-xs text-slate-400 text-right">{bio.length}/200</p>
        </div>
      </div>

      <button onClick={sauvegarder} className="flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded-xl transition-colors shadow-md shadow-blue-200 dark:shadow-blue-900/30">
        <Save size={15} /> Sauvegarder
      </button>
    </div>
  )
}

// ── Section Entreprise ────────────────────────────────────────────
function SectionEntreprise({ onSave }: { onSave: () => void }) {
  const { profil, mettreAJour } = useProfil()
  const logoRef = useRef<HTMLInputElement>(null)

  const [nom, setNom]           = useState(profil.nomEntreprise)
  const [secteur, setSecteur]   = useState(profil.secteur)
  const [taille, setTaille]     = useState("50-200 employés")
  const [site, setSite]         = useState("https://altis.ci")
  const [linkedin, setLinkedin] = useState("linkedin.com/company/altis")
  const [twitter, setTwitter]   = useState("@AltisGroupe")
  const [adresse, setAdresse]   = useState("Plateau, Abidjan")
  const [description, setDescription] = useState("Groupe Altis est un cabinet de recrutement spécialisé.")

  const tailles = ["1-10 employés", "10-50 employés", "50-200 employés", "200-500 employés", "+500 employés"]

  // Chargement logo réel
  const chargerLogo = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    const reader = new FileReader()
    reader.onload = () => mettreAJour({ logoEntreprise: reader.result as string })
    reader.readAsDataURL(file)
  }

  const sauvegarder = () => {
    mettreAJour({ nomEntreprise: nom, secteur })
    onSave()
  }

  return (
    <div className="space-y-8">
      {/* Logo entreprise avec upload réel */}
      <div className="flex items-center gap-6">
        <div className="relative">
          {profil.logoEntreprise ? (
            <img src={profil.logoEntreprise} alt="Logo" className="w-20 h-20 rounded-2xl object-cover shadow-lg ring-4 ring-slate-100 dark:ring-slate-800" />
          ) : (
            <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center shadow-lg">
              <Building2 size={32} className="text-white" />
            </div>
          )}
          <button onClick={() => logoRef.current?.click()} className="absolute -bottom-1 -right-1 w-7 h-7 bg-blue-600 rounded-full flex items-center justify-center text-white hover:bg-blue-700 transition-colors shadow-md">
            <Camera size={13} />
          </button>
          <input ref={logoRef} type="file" accept="image/*" onChange={chargerLogo} className="hidden" />
        </div>
        <div>
          <p className="font-bold text-slate-900 dark:text-white">{nom}</p>
          <p className="text-sm text-slate-500">{secteur}</p>
          <button onClick={() => logoRef.current?.click()} className="mt-2 flex items-center gap-1.5 text-xs text-blue-600 font-semibold hover:underline">
            <Upload size={12} /> Changer le logo
          </button>
          {profil.logoEntreprise && (
            <button onClick={() => mettreAJour({ logoEntreprise: null })} className="mt-1 text-xs text-red-500 hover:underline">
              Supprimer le logo
            </button>
          )}
        </div>
      </div>

      <div>
        <h3 className="text-sm font-bold text-slate-900 dark:text-white mb-4">Identité de l&apos;entreprise</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Champ label="Nom de l'entreprise" valeur={nom} onChange={setNom} icon={<Building2 size={15} />} />
          <Champ label="Secteur d'activité" valeur={secteur} onChange={setSecteur} />
          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-wider text-slate-500">Taille</label>
            <select value={taille} onChange={e => setTaille(e.target.value)}
              className="w-full px-4 py-3 text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-400 transition-all">
              {tailles.map(t => <option key={t}>{t}</option>)}
            </select>
          </div>
          <Champ label="Adresse" valeur={adresse} onChange={setAdresse} icon={<MapPin size={15} />} />
          <Champ label="Site web" valeur={site} onChange={setSite} icon={<Globe size={15} />} />
          <Champ label="LinkedIn" valeur={linkedin} onChange={setLinkedin} icon={<Linkedin size={15} />} />
          <Champ label="Twitter / X" valeur={twitter} onChange={setTwitter} icon={<Twitter size={15} />} />
        </div>
        <div className="mt-4 space-y-1.5">
          <label className="text-xs font-bold uppercase tracking-wider text-slate-500">Description</label>
          <textarea value={description} onChange={e => setDescription(e.target.value)} rows={4}
            className="w-full px-4 py-3 text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-400 transition-all resize-none" />
        </div>
      </div>

      <button onClick={sauvegarder} className="flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded-xl transition-colors shadow-md shadow-blue-200 dark:shadow-blue-900/30">
        <Save size={15} /> Sauvegarder
      </button>
    </div>
  )
}

// ── Section Notifications ─────────────────────────────────────────
function SectionNotifications({ onSave }: { onSave: () => void }) {
  const [notifs, setNotifs] = useState({
    nouvelleCandidature: true, offreExpiree: true, rapportHebdo: false,
    alerteUrgence: true, newsletter: false, sms: false, push: true,
  })
  const set = (key: keyof typeof notifs) => (v: boolean) => setNotifs(prev => ({ ...prev, [key]: v }))

  return (
    <div className="space-y-6">
      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 p-6">
        <h3 className="text-sm font-bold text-slate-900 dark:text-white mb-1">Notifications par email</h3>
        <p className="text-xs text-slate-400 mb-4">Choisissez les événements pour lesquels vous souhaitez être alerté.</p>
        <Toggle actif={notifs.nouvelleCandidature} onChange={set("nouvelleCandidature")} label="Nouvelle candidature" description="Alerté dès qu'un candidat postule" />
        <Toggle actif={notifs.offreExpiree} onChange={set("offreExpiree")} label="Offre expirée" description="Rappel avant l'expiration d'une offre" />
        <Toggle actif={notifs.rapportHebdo} onChange={set("rapportHebdo")} label="Rapport hebdomadaire" description="Résumé chaque lundi matin" />
        <Toggle actif={notifs.alerteUrgence} onChange={set("alerteUrgence")} label="Alertes urgentes" description="Offres urgentes nécessitant une action" />
        <Toggle actif={notifs.newsletter} onChange={set("newsletter")} label="Newsletter SCPro360°" description="Conseils RH et tendances du marché" />
      </div>
      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 p-6">
        <h3 className="text-sm font-bold text-slate-900 dark:text-white mb-4">Autres canaux</h3>
        <Toggle actif={notifs.sms} onChange={set("sms")} label="Notifications SMS" description="Alertes par SMS" />
        <Toggle actif={notifs.push} onChange={set("push")} label="Notifications push" description="Alertes en temps réel dans le navigateur" />
      </div>
      <button onClick={onSave} className="flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded-xl transition-colors">
        <Save size={15} /> Sauvegarder
      </button>
    </div>
  )
}

// ── Section Sécurité ──────────────────────────────────────────────
function SectionSecurite({ onSave }: { onSave: () => void }) {
  const [mdpActuel, setMdpActuel]   = useState("")
  const [mdpNouv, setMdpNouv]       = useState("")
  const [mdpConfirm, setMdpConfirm] = useState("")
  const [voirMdp, setVoirMdp]       = useState(false)
  const [double, setDouble]         = useState(false)
  const [sessions, setSessions]     = useState([
    { device: "Chrome — Windows 11", lieu: "Abidjan, CI", actif: true,  derniere: "Maintenant"   },
    { device: "Safari — iPhone 14",  lieu: "Abidjan, CI", actif: false, derniere: "Il y a 2h"    },
    { device: "Firefox — MacBook",   lieu: "Paris, FR",   actif: false, derniere: "Il y a 3 jours" },
  ])

  const force = mdpNouv.length === 0 ? 0 : mdpNouv.length < 6 ? 1 : mdpNouv.length < 10 ? 2 : 3
  const couleurForce = ["", "bg-red-400", "bg-amber-400", "bg-emerald-500"]
  const labelForce   = ["", "Faible", "Moyen", "Fort"]

  return (
    <div className="space-y-6">
      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 p-6">
        <div className="flex items-center gap-2 mb-4">
          <Lock size={16} className="text-slate-500" />
          <h3 className="text-sm font-bold text-slate-900 dark:text-white">Changer le mot de passe</h3>
        </div>
        <div className="space-y-4">
          <div className="relative">
            <input type={voirMdp ? "text" : "password"} value={mdpActuel} onChange={e => setMdpActuel(e.target.value)} placeholder="Mot de passe actuel"
              className="w-full px-4 py-3 pr-12 text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-400 transition-all" />
            <button onClick={() => setVoirMdp(!voirMdp)} className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
              {voirMdp ? <EyeOff size={16} /> : <Eye size={16} />}
            </button>
          </div>
          <input type={voirMdp ? "text" : "password"} value={mdpNouv} onChange={e => setMdpNouv(e.target.value)} placeholder="Nouveau mot de passe"
            className="w-full px-4 py-3 text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-400 transition-all" />
          {mdpNouv.length > 0 && (
            <div className="space-y-1.5">
              <div className="flex gap-1">
                {[1,2,3].map(i => <div key={i} className={`h-1.5 flex-1 rounded-full transition-all ${i <= force ? couleurForce[force] : "bg-slate-200 dark:bg-slate-700"}`} />)}
              </div>
              <p className={`text-xs font-semibold ${force === 1 ? "text-red-500" : force === 2 ? "text-amber-500" : "text-emerald-500"}`}>
                Force : {labelForce[force]}
              </p>
            </div>
          )}
          <input type={voirMdp ? "text" : "password"} value={mdpConfirm} onChange={e => setMdpConfirm(e.target.value)} placeholder="Confirmer le mot de passe"
            className={`w-full px-4 py-3 text-sm bg-slate-50 dark:bg-slate-800 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-400 transition-all ${mdpConfirm && mdpNouv !== mdpConfirm ? "border-red-400" : "border-slate-200 dark:border-slate-700"}`} />
          {mdpConfirm && mdpNouv !== mdpConfirm && <p className="text-xs text-red-500">Les mots de passe ne correspondent pas</p>}
        </div>
        <button onClick={onSave} className="mt-4 flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded-xl transition-colors">
          <Save size={15} /> Mettre à jour
        </button>
      </div>

      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 p-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="p-2.5 bg-emerald-50 dark:bg-emerald-900/20 rounded-xl">
              <Smartphone size={18} className="text-emerald-600" />
            </div>
            <div>
              <p className="text-sm font-bold text-slate-900 dark:text-white">Double authentification (2FA)</p>
              <p className="text-xs text-slate-400 mt-0.5">Sécurisez votre compte en 2 étapes</p>
            </div>
          </div>
          <button onClick={() => setDouble(!double)} className={`relative w-11 h-6 rounded-full transition-colors ${double ? "bg-blue-600" : "bg-slate-200 dark:bg-slate-700"}`}>
            <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${double ? "translate-x-5" : ""}`} />
          </button>
        </div>
      </div>

      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 p-6">
        <h3 className="text-sm font-bold text-slate-900 dark:text-white mb-4">Sessions actives</h3>
        <div className="space-y-3">
          {sessions.map((s, i) => (
            <div key={i} className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-xl">
              <div className="flex items-center gap-3">
                <div className={`w-2 h-2 rounded-full ${s.actif ? "bg-emerald-500 animate-pulse" : "bg-slate-300"}`} />
                <div>
                  <p className="text-xs font-semibold text-slate-900 dark:text-white">{s.device}</p>
                  <p className="text-[10px] text-slate-400">{s.lieu} · {s.derniere}</p>
                </div>
              </div>
              {s.actif
                ? <span className="text-xs text-emerald-600 font-semibold">Session actuelle</span>
                : <button onClick={() => setSessions(prev => prev.filter((_, j) => j !== i))} className="text-xs text-red-500 hover:text-red-700 font-semibold">Révoquer</button>
              }
            </div>
          ))}
        </div>
      </div>

      <div className="bg-red-50 dark:bg-red-900/10 rounded-2xl border border-red-200 dark:border-red-800/50 p-6">
        <div className="flex items-center gap-2 mb-3">
          <AlertTriangle size={16} className="text-red-500" />
          <h3 className="text-sm font-bold text-red-700 dark:text-red-400">Zone de danger</h3>
        </div>
        <p className="text-xs text-red-600 dark:text-red-400 mb-4">Ces actions sont irréversibles.</p>
        <button className="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-slate-900 border border-red-300 dark:border-red-700 text-red-600 text-sm font-bold rounded-xl hover:bg-red-50 transition-colors">
          <Trash2 size={14} /> Supprimer mon compte
        </button>
      </div>
    </div>
  )
}

// ── Section Abonnement ────────────────────────────────────────────
function SectionAbonnement() {
  const plans = [
    { nom: "Gratuit",    prix: "0",  offres: "3 offres",          actuel: false },
    { nom: "Pro",        prix: "29", offres: "Offres illimitées",  actuel: true  },
    { nom: "Entreprise", prix: "99", offres: "Multi-utilisateurs", actuel: false },
  ]
  const fonctionnalites = [
    { label: "Offres actives",      gratuit: "3",      pro: "Illimitées", entreprise: "Illimitées" },
    { label: "Candidats par offre", gratuit: "10",     pro: "Illimités",  entreprise: "Illimités"  },
    { label: "Analyses",            gratuit: "Basique",pro: "Avancé",     entreprise: "Complet"    },
    { label: "Support",             gratuit: "Email",  pro: "Prioritaire",entreprise: "Dédié 24/7" },
    { label: "Export données",      gratuit: "❌",     pro: "✅",         entreprise: "✅"         },
  ]

  return (
    <div className="space-y-8">
      <div className="bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl p-6 text-white">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-xs font-bold uppercase tracking-widest text-blue-200 mb-1">Plan actuel</p>
            <h2 className="text-2xl font-extrabold">Pro</h2>
            <p className="text-blue-200 text-sm mt-1">Renouvellement le 13 mai 2026</p>
          </div>
          <div className="text-right">
            <p className="text-3xl font-extrabold">29€</p>
            <p className="text-blue-200 text-sm">/ mois</p>
          </div>
        </div>
        <div className="mt-4 flex items-center gap-2">
          <div className="flex-1 h-1.5 bg-blue-500/50 rounded-full">
            <div className="h-full w-4/5 bg-white rounded-full" />
          </div>
          <span className="text-xs text-blue-200">8/10 offres utilisées</span>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {plans.map((p, i) => (
          <motion.div key={i} whileHover={{ y: -4 }} className={`relative rounded-2xl border-2 p-5 transition-all ${p.actuel ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900"}`}>
            {p.actuel && <span className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-blue-600 text-white text-[10px] font-bold rounded-full uppercase tracking-wider">Plan actuel</span>}
            <h3 className="font-extrabold text-slate-900 dark:text-white mb-1">{p.nom}</h3>
            <div className="flex items-baseline gap-1 mb-3">
              <span className="text-3xl font-extrabold text-slate-900 dark:text-white">{p.prix}€</span>
              <span className="text-xs text-slate-400">/mois</span>
            </div>
            <p className="text-xs text-slate-500 mb-4">{p.offres}</p>
            <button disabled={p.actuel} className={`w-full py-2.5 text-sm font-bold rounded-xl transition-colors ${p.actuel ? "bg-blue-600 text-white cursor-default" : "border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"}`}>
              {p.actuel ? "Plan actuel" : "Choisir"}
            </button>
          </motion.div>
        ))}
      </div>

      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-slate-50 dark:bg-slate-800/50">
            <tr>
              <th className="px-5 py-3.5 text-left text-xs font-bold uppercase tracking-wider text-slate-400">Fonctionnalité</th>
              <th className="px-5 py-3.5 text-center text-xs font-bold uppercase tracking-wider text-slate-400">Gratuit</th>
              <th className="px-5 py-3.5 text-center text-xs font-bold uppercase tracking-wider text-blue-600">Pro</th>
              <th className="px-5 py-3.5 text-center text-xs font-bold uppercase tracking-wider text-slate-400">Entreprise</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-50 dark:divide-slate-800">
            {fonctionnalites.map((f, i) => (
              <tr key={i} className="hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors">
                <td className="px-5 py-3.5 text-sm text-slate-700 dark:text-slate-300">{f.label}</td>
                <td className="px-5 py-3.5 text-center text-xs text-slate-500">{f.gratuit}</td>
                <td className="px-5 py-3.5 text-center text-xs font-semibold text-blue-600">{f.pro}</td>
                <td className="px-5 py-3.5 text-center text-xs text-slate-500">{f.entreprise}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

// ── Page principale ───────────────────────────────────────────────
const ONGLETS: { id: Onglet; label: string; icon: React.ReactNode }[] = [
  { id: "profil",        label: "Mon profil",    icon: <User size={16} />       },
  { id: "entreprise",   label: "Entreprise",     icon: <Building2 size={16} />  },
  { id: "notifications",label: "Notifications",  icon: <Bell size={16} />       },
  { id: "securite",     label: "Sécurité",       icon: <Shield size={16} />     },
  { id: "abonnement",   label: "Abonnement",     icon: <CreditCard size={16} /> },
]

export default function PageParametres() {
  const [onglet, setOnglet]     = useState<Onglet>("profil")
  const [toastVisible, setToast] = useState(false)

  const sauvegarder = () => {
    setToast(true)
    setTimeout(() => setToast(false), 3000)
  }

  return (
    <div className="flex h-screen overflow-hidden bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100">
      <BarreLaterale />
      <main className="flex-1 flex flex-col overflow-hidden">
        <BarreSuperieure />
        <div className="flex-1 overflow-y-auto p-8">
          <div className="max-w-5xl mx-auto">
            <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
              <h1 className="text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight">Paramètres</h1>
              <p className="text-slate-500 text-sm mt-1">Gérez votre compte, votre entreprise et vos préférences.</p>
            </motion.div>

            <div className="flex flex-col lg:flex-row gap-8">
              {/* Nav latérale */}
              <motion.nav initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="lg:w-56 shrink-0">
                <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 p-2 shadow-sm">
                  {ONGLETS.map((o, i) => (
                    <motion.button key={o.id} initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: i * 0.05 }}
                      onClick={() => setOnglet(o.id)}
                      className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all mb-0.5 last:mb-0 ${onglet === o.id ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-semibold" : "text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800"}`}>
                      <div className="flex items-center gap-2.5">{o.icon}{o.label}</div>
                      {onglet === o.id && <ChevronRight size={14} />}
                    </motion.button>
                  ))}
                </div>
              </motion.nav>

              {/* Contenu */}
              <motion.div key={onglet} initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.2 }} className="flex-1 min-w-0">
                {onglet === "profil"        && <SectionProfil onSave={sauvegarder} />}
                {onglet === "entreprise"    && <SectionEntreprise onSave={sauvegarder} />}
                {onglet === "notifications" && <SectionNotifications onSave={sauvegarder} />}
                {onglet === "securite"      && <SectionSecurite onSave={sauvegarder} />}
                {onglet === "abonnement"    && <SectionAbonnement />}
              </motion.div>
            </div>
          </div>
        </div>
      </main>
      <SauvegardeToast visible={toastVisible} />
    </div>
  )
}