'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { 
  MapPin, 
  ArrowRight, 
  ArrowLeft, 
  Mic, 
  Rocket, 
  Globe,
  UtensilsCrossed,
  Sparkles,
  ShoppingCart,
  Truck,
  HardHat,
  Wrench,
  Baby,
  Sprout,
  Briefcase,
  UserCircle,
  Wallet,
  CheckCircle,
  ChevronRight
} from 'lucide-react';

// Types
type Skill = {
  id: string;
  name: string;
  icon: React.ReactNode;
};

type Goal = {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
};

const PersonalInfoPage = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const totalSteps = 3;
  
  const [formData, setFormData] = useState({
    firstname: '',
    lastname: '',
    city: '',
    skills: [] as string[],
    goal: 'freelance' as string,
  });

  // Liste des compétences
  const skills: Skill[] = [
    { id: 'cuisine', name: 'Cuisine', icon: <UtensilsCrossed size={32} /> },
    { id: 'nettoyage', name: 'Nettoyage', icon: <Sparkles size={32} /> },
    { id: 'vente', name: 'Vente', icon: <ShoppingCart size={32} /> },
    { id: 'transport', name: 'Transport', icon: <Truck size={32} /> },
    { id: 'batiment', name: 'Bâtiment', icon: <HardHat size={32} /> },
    { id: 'entretien', name: 'Entretien', icon: <Wrench size={32} /> },
    { id: 'garde', name: "Garde d'enfants", icon: <Baby size={32} /> },
    { id: 'agriculture', name: 'Agriculture', icon: <Sprout size={32} /> },
  ];

  // Liste des objectifs
  const goals: Goal[] = [
    {
      id: 'emploi',
      title: 'Je cherche un emploi',
      description: 'Trouver un poste stable dans une entreprise avec des avantages sociaux.',
      icon: <Briefcase size={28} />,
    },
    {
      id: 'freelance',
      title: 'Je veux être freelance',
      description: 'Travailler de manière indépendante et gérer votre propre emploi du temps.',
      icon: <UserCircle size={28} />,
    },
    {
      id: 'revenu',
      title: "Besoin d'un revenu immédiat",
      description: 'Missions rapides payées tout de suite pour subvenir à des besoins urgents.',
      icon: <Wallet size={28} />,
    },
  ];

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const toggleSkill = (skillId: string) => {
    setFormData(prev => ({
      ...prev,
      skills: prev.skills.includes(skillId)
        ? prev.skills.filter(id => id !== skillId)
        : [...prev.skills, skillId]
    }));
  };

  const selectGoal = (goalId: string) => {
    setFormData(prev => ({
      ...prev,
      goal: goalId
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form data:', formData);
    
    if (currentStep < totalSteps) {
      setCurrentStep(currentStep + 1);
    } else {
      console.log('Formulaire complet soumis:', formData);
      // Redirection ou action finale
    }
  };

  const handleBack = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  const progressPercentage = (currentStep / totalSteps) * 100;

  return (
    <div className="relative flex min-h-screen w-full flex-col overflow-x-hidden bg-background-light dark:bg-background-dark">
      {/* Header */}
      <header className="flex items-center justify-between whitespace-nowrap border-b border-solid border-[#e5e7eb] dark:border-white/10 px-6 py-4 md:px-40 bg-white dark:bg-background-dark">
        <Link href="/" className="flex items-center gap-3 cursor-pointer">
          <div className="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
            <Rocket size={20} />
          </div>
          <h2 className="text-xl font-black leading-tight tracking-tight">
            SCPro360
          </h2>
        </Link>
        <div className="flex gap-4">
          <button className="text-sm font-bold text-primary hover:text-primary/80 transition-colors">
            Aide
          </button>
          <button className="flex items-center justify-center rounded-lg h-10 w-10 bg-[#f0f2f4] dark:bg-[#d2d9e0]">
            <Globe size={20} className="text-primary" />
          </button>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 flex flex-col items-center pt-8 pb-12 px-4">
        <div className="max-w-200 w-full flex flex-col">
          {/* Progress Bar */}
          <div className="mb-12">
            <div className="flex justify-between items-center mb-3">
              <span className="text-sm font-bold text-primary">
                Étape {currentStep} sur {totalSteps}
              </span>
              <span className="text-sm font-medium text-[#617589] dark:text-gray-400">
                {currentStep === 1 && 'Informations Personnelles'}
                {currentStep === 2 && 'Compétences'}
                {currentStep === 3 && 'Objectif'}
              </span>
            </div>
            <div className="relative">
              <div className="w-full bg-gray-200 dark:bg-gray-700 h-3 rounded-full overflow-hidden shadow-inner">
                <div
                  className="bg-linear-to-r from-primary to-blue-500 h-full rounded-full transition-all duration-500 ease-out shadow-lg"
                  style={{ width: `${progressPercentage}%` }}
                />
              </div>
              <div className="absolute top-0 left-0 w-full h-full flex justify-between px-1">
                {[1, 2, 3].map((step) => (
                  <div
                    key={step}
                    className={` transition-all duration-300 ${
                      step <= currentStep
                        ? 'bg-primary border-primary shadow-lg'
                        : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600'
                    }`}
                    style={{
                      transform: 'translateY(-50%)',
                      top: '50%',
                    }}
                  />
                ))}
              </div>
            </div>
            <div className="text-center mt-2">
              <span className="text-xs font-semibold text-primary">
                {Math.round(progressPercentage)}% complété
              </span>
            </div>
          </div>

          {/* Title Section */}
          <div className="mb-10 text-center">
            <h1 className="text-[#111418] dark:text-black tracking-tight text-3xl md:text-4xl font-bold leading-tight mb-4">
              {currentStep === 1 && 'Parlons un peu de vous'}
              {currentStep === 2 && 'Que savez-vous faire ?'}
              {currentStep === 3 && 'Quel est votre objectif ?'}
            </h1>
            <p className="text-[#617589] dark:text-gray-400 text-lg">
              {currentStep === 1 && 'Complétez votre profil pour que nous puissions mieux vous accompagner.'}
              {currentStep === 2 && 'Choisissez vos domaines de compétences principaux pour nous aider à trouver les meilleures opportunités.'}
              {currentStep === 3 && "Choisissez l'option qui vous correspond le mieux pour personnaliser votre expérience."}
            </p>
          </div>

          {/* Form */}
          <form onSubmit={handleSubmit}>
            {/* ÉTAPE 1: Informations Personnelles */}
            {currentStep === 1 && (
              <div className="space-y-8 bg-white dark:bg-[#f9f9fa] p-8 md:p-10 rounded-2xl shadow-sm border border-[#e5e7eb] dark:border-white/5">
                <div className="flex flex-col gap-2">
                  <div className="flex items-center justify-between">
                    <label className="text-base font-semibold text-[#111418]" htmlFor="firstname">
                      Prénom
                    </label>
                    <button className="flex items-center gap-1 text-primary hover:text-primary/80 transition-colors text-sm font-medium" type="button">
                      <Mic size={20} />
                      <span>Écouter l'aide</span>
                    </button>
                  </div>
                  <input
                    className="w-full h-14 px-4 rounded-xl border border-[#d1dae6] dark:bg-background-dark focus:border-primary focus:ring-2 focus:ring-primary text-lg"
                    id="firstname"
                    name="firstname"
                    placeholder="Ex: Jean"
                    required
                    type="text"
                    value={formData.firstname}
                    onChange={handleChange}
                  />
                </div>

                <div className="flex flex-col gap-2">
                  <div className="flex items-center justify-between">
                    <label className="text-base font-semibold text-[#111418]" htmlFor="lastname">
                      Nom
                    </label>
                    <button className="flex items-center gap-1 text-primary hover:text-primary/80 transition-colors text-sm font-medium" type="button">
                      <Mic size={20} />
                      <span>Écouter l'aide</span>
                    </button>
                  </div>
                  <input
                    className="w-full h-14 px-4 rounded-xl border border-[#d1dae6] dark:bg-background-dark focus:border-primary focus:ring-2 focus:ring-primary text-lg"
                    id="lastname"
                    name="lastname"
                    placeholder="Ex: Dupont"
                    required
                    type="text"
                    value={formData.lastname}
                    onChange={handleChange}
                  />
                </div>

                <div className="flex flex-col gap-2">
                  <div className="flex items-center justify-between">
                    <label className="text-base font-semibold text-[#111418] " htmlFor="city">
                      Ville de résidence
                    </label>
                    <button className="flex items-center gap-1 text-primary hover:text-primary/80 transition-colors text-sm font-medium" type="button">
                      <Mic size={20} />
                      <span>Écouter l'aide</span>
                    </button>
                  </div>
                  <div className="relative">
                    <MapPin size={20} className="absolute left-4 top-1/2 -translate-y-1/2 text-[#617589]" />
                    <input
                      className="w-full h-14 pl-12 pr-4 rounded-xl border border-[#d1dae6]  dark:bg-background-dark focus:border-primary focus:ring-2 focus:ring-primary text-lg"
                      id="city"
                      name="city"
                      placeholder="Ex: Paris"
                      required
                      type="text"
                      value={formData.city}
                      onChange={handleChange}
                    />
                  </div>
                </div>
              </div>
            )}

            {/* ÉTAPE 2: Compétences */}
            {currentStep === 2 && (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {skills.map((skill) => (
                  <div
                    key={skill.id}
                    onClick={() => toggleSkill(skill.id)}
                    className={`cursor-pointer group flex flex-col items-center justify-center p-6 rounded-xl border transition-all hover:shadow-xl ${
                      formData.skills.includes(skill.id)
                        ? 'border-primary bg-primary/5 shadow-[0_0_0_1px] shadow-primary'
                        : 'border-primary/10 bg-white dark:bg-background-dark/50 hover:border-primary/40'
                    }`}
                  >
                    <div className={`size-16 flex items-center justify-center rounded-full mb-4 transition-all ${
                      formData.skills.includes(skill.id)
                        ? 'bg-primary text-white'
                        : 'bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white'
                    }`}>
                      {skill.icon}
                    </div>
                    <h3 className="text-[#111418] text-lg font-bold text-center">
                      {skill.name}
                    </h3>
                  </div>
                ))}
              </div>
            )}

            {/* ÉTAPE 3: Objectifs */}
            {currentStep === 3 && (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {goals.map((goal) => (
                  <button
                    key={goal.id}
                    type="button"
                    onClick={() => selectGoal(goal.id)}
                    className={`group flex flex-col gap-5 p-6 rounded-xl border text-left transition-all focus:outline-none focus:ring-4 focus:ring-primary/20 ${
                      formData.goal === goal.id
                        ? 'border-primary bg-primary/5  shadow-lg'
                        : 'border-[#f0f2f4]  bg-white  hover:border-primary hover:shadow-xl'
                    }`}
                  >
                    <div className={`size-14 rounded-lg flex items-center justify-center transition-transform ${
                      formData.goal === goal.id
                        ? 'bg-primary text-white scale-110'
                        : 'bg-primary/10 text-primary group-hover:scale-110'
                    }`}>
                      {goal.icon}
                    </div>
                    <div>
                      <h3 className="text-[#111418] dark:text-black text-lg font-bold mb-2">
                        {goal.title}
                      </h3>
                      <p className="text-[#617589] dark:text-gray-800 text-sm leading-relaxed">
                        {goal.description}
                      </p>
                    </div>
                    <div className={`mt-auto pt-4 flex items-center font-bold text-xs uppercase tracking-widest transition-opacity ${
                      formData.goal === goal.id ? 'text-primary opacity-100' : 'text-primary opacity-0 group-hover:opacity-100'
                    }`}>
                      {formData.goal === goal.id ? (
                        <>Sélectionné <CheckCircle size={16} className="ml-2" /></>
                      ) : (
                        <>Sélectionner <ChevronRight size={16} className="ml-2" /></>
                      )}
                    </div>
                  </button>
                ))}
              </div>
            )}

            {/* Submit Button */}
            <div className="pt-8">
              <button
                className="w-full bg-primary text-white font-bold py-5 rounded-xl hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-3 text-xl group"
                type="submit"
              >
                <span>{currentStep === totalSteps ? "Terminer l'inscription" : 'Continuer'}</span>
                {currentStep === totalSteps ? (
                  <CheckCircle size={24} className="group-hover:translate-x-1 transition-transform" />
                ) : (
                  <ArrowRight size={24} className="group-hover:translate-x-1 transition-transform" />
                )}
              </button>
            </div>
          </form>

          {/* Back Button */}
          <div className="mt-8 flex justify-center">
            {currentStep > 1 ? (
              <button
                onClick={handleBack}
                className="text-[#617589] dark:text-gray-400 hover:text-primary transition-colors flex items-center gap-2 font-medium"
              >
                <ArrowLeft size={20} />
                <span>Retour</span>
              </button>
            ) : (
              <Link
                href="/Signup"
                className="text-[#617589] dark:text-gray-400 hover:text-primary transition-colors flex items-center gap-2 font-medium"
              >
                <ArrowLeft size={20} />
                <span>Retour</span>
              </Link>
            )}
          </div>
        </div>
      </main>

      {/* Background decorations */}
      <div className="fixed top-20 -right-25 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
      <div className="fixed bottom-10 -left-25 w-80 h-80 bg-primary/10 rounded-full blur-3xl pointer-events-none" />

      {/* Footer */}
      <footer className="py-8 px-10 text-center text-[#617589] dark:text-gray-500 text-xs">
        <p>© 2024 SCPro360 - Le système d'exploitation pour l'employabilité. Tous droits réservés.</p>
      </footer>
    </div>
  );
};

export default PersonalInfoPage;