"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  CloudUpload,
  MapPin,
  ArrowRight,
  ArrowLeft,
  HelpCircle,
  Bell,
  Rocket,
  UploadCloud,
  Info,
  CheckCircle,
  Palette,
} from "lucide-react";

const OrganizationSignupPage = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const totalSteps = 3;

  const [formData, setFormData] = useState({
    // Étape 1
    logo: null as File | null,
    orgName: "",
    sector: "",
    city: "",
    region: "",
    // Étape 2
    orgName2: "",
    sector2: "",
    location: "",
    brandLogo: null as File | null,
  });

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

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const fieldName = e.target.name;
    if (e.target.files && e.target.files[0]) {
      setFormData({
        ...formData,
        [fieldName]: e.target.files[0],
      });
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Form data:", formData);

    if (currentStep < totalSteps) {
      setCurrentStep(currentStep + 1);
    } else {
      console.log("Formulaire complet soumis");
      // Redirection vers le dashboard
    }
  };

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

  const progressPercentage = (currentStep / totalSteps) * 100;

  return (
    <div className="bg-background-light dark:bg-background-dark min-h-screen text-[#111418]">
      {/* Header - Version Étape 2 */}
      <header className="sticky top-0 z-50 w-full bg-white dark:bg-background-dark border-b border-solid border-[#f0f2f4] dark:border-white/10 px-4 md:px-10 lg:px-40 py-3 flex items-center justify-between whitespace-nowrap">
        <Link href="/" className="flex items-center gap-4 cursor-pointer">
          <div className="size-10 bg-primary rounded-lg flex items-center justify-center text-white">
            <Rocket size={32} />
          </div>
           <h2 className="text-xl font-black leading-tight tracking-tight">
            SCPro360
          </h2>
        </Link>
        <div className="flex flex-1 justify-end gap-8">
          <div className="hidden md:flex items-center gap-9">
            <a
              className="text-[#111418] text-sm font-medium hover:text-primary transition-colors"
              href="#"
            >
              Fonctionnalités
            </a>
            <a
              className="text-[#111418]text-sm font-medium hover:text-primary transition-colors"
              href="#"
            >
              Tarification
            </a>
            <a
              className="text-[#111418] text-sm font-medium hover:text-primary transition-colors"
              href="#"
            >
              Support
            </a>
          </div>
          <Link href="/Login">
            <button className="flex min-w-25 cursor-pointer items-center justify-center rounded-lg h-10 px-5 bg-primary text-white text-sm font-bold leading-normal tracking-[0.015em] hover:bg-primary/90 transition-all">
              <span className="truncate">Connexion</span>
            </button>
          </Link>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex flex-1 flex-col items-center justify-center p-4 md:p-10">
        <div className="w-full max-w-200 flex flex-col gap-6">
          {/* Title - Only show for steps 1 and 2 */}
          {currentStep < 3 && (
            <div className="text-center">
              <h1 className="text-black  tracking-light text-[36px] font-bold leading-tight pb-2 pt-4">
                Créer votre compte Organisation
              </h1>
              <p className="text-[#617589]  text-lg font-normal leading-normal max-w-150 mx-auto">
                Préparez votre espace pour recruter et gérer vos talents.
              </p>
            </div>
          )}

          {/* Success Card - Step 3 */}
          {currentStep === 3 ? (
            <div className="w-full max-w-160 mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-primary/5">
              {/* Progress Bar Section */}
              <div className="p-6 md:p-8 border-b border-primary/5">
                <div className="flex flex-col gap-3">
                  <div className="flex gap-6 justify-between items-center">
                    <p className="text-primary text-sm font-semibold uppercase tracking-wider">
                      Étape 3 sur 3 : Finalisation
                    </p>
                    <p className="text-primary text-sm font-bold">100%</p>
                  </div>
                  <div className="h-3 w-full rounded-full bg-primary overflow-hidden">
                    <div
                      className="h-full bg-primary transition-all duration-1000"
                      style={{ width: "100%" }}
                    />
                  </div>
                </div>
              </div>

              {/* Success Content */}
              <div className="p-8 md:p-12 flex flex-col items-center text-center">
                <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-primary/10 text-primary">
                  <CheckCircle size={64} />
                </div>
                <h1 className="text-[#111418] text-3xl md:text-4xl font-bold leading-tight mb-4">
                  Félicitations ! Votre espace est prêt.
                </h1>
                <p className="text-[#617589] text-lg mb-10 max-w-md">
                  Votre compte organisationnel a été configuré avec succès. Vous
                  pouvez maintenant commencer à gérer vos projets.
                </p>

                {/* Summary Card */}
                <div className="w-full bg-background-light rounded-xl p-6 text-left border border-primary/5 mb-8">
                  <h3 className="text-[#111418] font-bold text-lg mb-4 flex items-center gap-2">
                    <Info size={20} className="text-primary" />
                    Résumé de votre organisation
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <p className="text-[#121213] text-xs font-medium uppercase tracking-tighter">
                        Nom de l&apos;organisation
                      </p>
                      <p className="text-[#111418] font-semibold">
                        {formData.orgName ||
                          formData.orgName2 ||
                          "Global Tech Solutions"}
                      </p>
                    </div>
                    <div className="space-y-1">
                      <p className="text-[#617589] text-xs font-medium uppercase tracking-tighter">
                        Secteur
                      </p>
                      <p className="text-[#111418] font-semibold">
                        {formData.sector ||
                          formData.sector2 ||
                          "Technologies & SaaS"}
                      </p>
                    </div>
                    <div className="space-y-1">
                      <p className="text-[#617589] text-xs font-medium uppercase tracking-tighter">
                        Localisation
                      </p>
                      <p className="text-[#111418] font-semibold">
                        {formData.location ||
                          `${formData.city}, ${formData.region}` ||
                          "Paris, France"}
                      </p>
                    </div>
                    <div className="space-y-1">
                      <p className="text-[#617589] text-xs font-medium uppercase tracking-tighter">
                        Type de compte
                      </p>
                      <div className="flex items-center gap-2">
                        <span className="text-[#111418] font-semibold">
                          Enterprise
                        </span>
                        <span className="inline-flex items-center rounded-full bg-primary px-2 py-0.5 text-[10px] font-bold text-white">
                          PRO
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* White Label confirmation */}
                  <div className="mt-6 pt-6 border-t border-primary/10">
                    <div className="flex items-center gap-3 bg-white p-3 rounded-lg border border-primary/10">
                      <div className="h-8 w-8 rounded bg-primary flex items-center justify-center text-white shrink-0">
                        <Palette size={20} />
                      </div>
                      <div className="flex-1">
                        <p className="text-sm font-semibold text-[#111418]">
                          Thème White-label appliqué
                        </p>
                        <p className="text-xs text-[#617589]">
                          Votre interface personnalisée est maintenant active
                          sur tout votre espace.
                        </p>
                      </div>
                      <div className="flex gap-1">
                        <div className="size-3 rounded-full bg-primary" />
                        <div className="size-3 rounded-full bg-[#111418]" />
                        <div className="size-3 rounded-full bg-[#f0f2f4]" />
                      </div>
                    </div>
                  </div>
                </div>

                {/* Main Action */}
                {/* Main Action */}
<Link
  href="/composants/TABLEAU_DE_BORD_ENTREPRISE/"
  className="w-full bg-primary text-white font-bold py-4 px-8 rounded-lg text-lg shadow-lg shadow-primary/20 hover:bg-primary/90 transition-all flex items-center justify-center gap-2 group"
>
  Accéder au Tableau de Bord
  <ArrowRight
    size={20}
    className="group-hover:translate-x-1 transition-transform"
  />
</Link>
              </div>

              {/* Decorative Footer */}
              <div className="bg-primary/5 py-4 px-8 text-center">
                <p className="text-[#617589] text-sm">
                  Besoin d&apos;aide pour vos premiers pas ?{" "}
                  <a
                    className="text-primary font-semibold hover:underline"
                    href="#"
                  >
                    Consultez notre guide de démarrage
                  </a>
                </p>
              </div>
            </div>
          ) : (
            <>
              {/* Progress Bar - Steps 1 and 2 */}
              <div className="bg-white dark:bg-white/5 border border-[#e5e7eb] dark:border-white/10 rounded-xl p-6 shadow-sm">
                <div className="flex flex-col gap-3">
                  <div className="flex gap-6 justify-between items-end">
                    <p className="text-[#111418] text-base font-semibold leading-normal">
                      Étape {currentStep} sur {totalSteps}
                    </p>
                    <p className="text-primary text-sm font-bold leading-normal">
                      {Math.round(progressPercentage)}% complété
                    </p>
                  </div>
                  <div className="rounded-full bg-[#dbe0e6]  overflow-hidden h-2.5">
                    <div
                      className="h-full rounded-full bg-primary transition-all duration-500"
                      style={{ width: `${progressPercentage}%` }}
                    />
                  </div>
                  <p className="text-[#617589]text-xs uppercase tracking-wider font-bold">
                    {currentStep === 1 && "Identité de la structure"}
                    {currentStep === 2 && "Informations sur l'organisation"}
                  </p>
                </div>
              </div>

              {/* Form Container */}
              <div className="bg-white dark:bg-white/5 border border-[#e5e7eb] dark:border-white/10 rounded-xl overflow-hidden shadow-sm">
                <div className="px-6 pt-6 pb-2">
                  <h3 className="text-[#111418]  text-xl font-bold leading-tight tracking-[-0.015em]">
                    {currentStep === 1 && "Informations de base"}
                    {currentStep === 2 && "Identité de l'organisation"}
                  </h3>
                  <p className="text-[#617589] text-sm">
                    {currentStep === 1 &&
                      "Renseignez les informations de base pour commencer."}
                    {currentStep === 2 &&
                      "Ces informations serviront à personnaliser votre environnement de travail."}
                  </p>
                </div>

                <form onSubmit={handleSubmit}>
                  <div className="p-6 flex flex-col gap-6">
                    {/* ÉTAPE 1 */}
                    {currentStep === 1 && (
                      <>
                        {/* Logo Upload */}
                        <div className="flex flex-col gap-4">
                          <label className="text-lg font-bold text-[#0f1011] ">
                            Logo de l&apos;organisation
                          </label>
                          <label
                            htmlFor="logo-upload"
                            className="flex w-full flex-col items-center justify-center gap-4 rounded-xl border-2 border-dashed border-primary/30 bg-primary/5 py-10 px-6 hover:bg-primary/10 transition-colors cursor-pointer group"
                          >
                            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/20 text-primary group-hover:scale-110 transition-transform">
                              <CloudUpload size={32} />
                            </div>
                            <div className="text-center">
                              <p className="text-base font-bold text-[#111418]">
                                {formData.logo
                                  ? formData.logo.name
                                  : "Cliquez pour télécharger ou glissez votre logo"}
                              </p>
                              <p className="text-sm text-[#526272]  mt-1">
                                Utilisé pour la personnalisation en marque
                                blanche (PNG, JPG, max 5MB).
                              </p>
                            </div>
                            <input
                              id="logo-upload"
                              name="logo"
                              type="file"
                              accept="image/png, image/jpeg"
                              className="hidden"
                              onChange={handleFileChange}
                            />
                          </label>
                        </div>

                        {/* Form Fields */}
                        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                          <div className="flex flex-col gap-2 md:col-span-2">
                            <label
                              className="text-base font-semibold text-[#111418]"
                              htmlFor="orgName"
                            >
                              Nom de l&apos;organisation
                            </label>
                            <input
                              className="w-full rounded-lg border border-primary/20 bg-background-light dark:bg-white/5 p-4 text-base focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all text-[#111418] "
                              id="orgName"
                              name="orgName"
                              placeholder="Ex: SCPro Services SARL"
                              type="text"
                              value={formData.orgName}
                              onChange={handleChange}
                              required
                            />
                          </div>

                          <div className="flex flex-col gap-2 md:col-span-2">
                            <label
                              className="text-base font-semibold text-[#111418] "
                              htmlFor="sector"
                            >
                              Secteur d&apos;activité
                            </label>
                            <select
                              className="w-full rounded-lg border border-primary/20 bg-background-light dark:bg-white/5 p-4 text-base focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all appearance-none cursor-pointer text-[#111418] "
                              id="sector"
                              name="sector"
                              value={formData.sector}
                              onChange={handleChange}
                              required
                            >
                              <option disabled value="">
                                Choisir un secteur
                              </option>
                              <option value="tech">Technologie & IT</option>
                              <option value="sante">Santé & Bien-être</option>
                              <option value="education">
                                Éducation & Formation
                              </option>
                              <option value="btp">BTP & Immobilier</option>
                              <option value="finance">Banque & Finance</option>
                              <option value="autre">Autre</option>
                            </select>
                          </div>

                          <div className="flex flex-col gap-2">
                            <label
                              className="text-base font-semibold text-[#111418] "
                              htmlFor="city"
                            >
                              Ville
                            </label>
                            <div className="relative">
                              <input
                                className="w-full rounded-lg border border-primary/20 bg-background-light p-4 pl-12 text-base focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all text-[#111418]"
                                id="city"
                                name="city"
                                placeholder="Ex: Paris"
                                type="text"
                                value={formData.city}
                                onChange={handleChange}
                                required
                              />
                              <MapPin
                                size={20}
                                className="absolute left-4 top-1/2 -translate-y-1/2 text-primary/60"
                              />
                            </div>
                          </div>

                          <div className="flex flex-col gap-2">
                            <label
                              className="text-base font-semibold text-[#111418]"
                              htmlFor="region"
                            >
                              Région
                            </label>
                            <input
                              className="w-full rounded-lg border border-primary/20 bg-background-light p-4 text-base focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all text-[#111418]"
                              id="region"
                              name="region"
                              placeholder="Ex: Île-de-France"
                              type="text"
                              value={formData.region}
                              onChange={handleChange}
                              required
                            />
                          </div>
                        </div>
                      </>
                    )}

                    {/* ÉTAPE 2 */}
                    {currentStep === 2 && (
                      <>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div className="flex flex-col gap-2">
                            <label className="text-[#111418] text-sm font-bold leading-normal">
                              Nom de l&apos;organisation
                            </label>
                            <input
                              className="flex h-12 w-full rounded-lg border-solid border border-[#dbe0e6] dark:border-white/10 bg-white dark:bg-white/5 px-4 text-sm font-normal focus:border-primary focus:ring-1 focus:ring-primary outline-none text-[#111418] placeholder-[#617589]"
                              placeholder="Ex: Entreprise de Services"
                              type="text"
                              name="orgName2"
                              value={formData.orgName2}
                              onChange={handleChange}
                            />
                          </div>
                          <div className="flex flex-col gap-2">
                            <label className="text-[#111418]  text-sm font-bold leading-normal">
                              Secteur d&apos;activité
                            </label>
                            <select
                              className="flex h-12 w-full rounded-lg border-solid border border-[#dbe0e6]  bg-white dark:bg-white/5 px-4 text-sm font-normal focus:border-primary focus:ring-1 focus:ring-primary outline-none text-[#111418] "
                              name="sector2"
                              value={formData.sector2}
                              onChange={handleChange}
                            >
                              <option disabled value="">
                                Sélectionner un secteur
                              </option>
                              <option>Agriculture</option>
                              <option>Technologie</option>
                              <option>Services</option>
                              <option>Industrie</option>
                              <option>Éducation & Formation</option>
                              <option>Commerce & Distribution</option>
                              <option>Autre</option>
                            </select>
                          </div>
                        </div>

                        <div className="flex flex-col gap-2">
                          <label className="text-[#111418] text-sm font-bold leading-normal">
                            Localisation (Ville / Région)
                          </label>
                          <div className="relative">
                            <MapPin
                              size={20}
                              className="absolute left-3 top-1/2 -translate-y-1/2 text-[#617589]"
                            />
                            <input
                              className="flex h-12 w-full rounded-lg border-solid border border-[#dbe0e6]  bg-white dark:bg-white/5 pl-10 pr-4 text-sm font-normal focus:border-primary focus:ring-1 focus:ring-primary outline-none text-[#111418] placeholder-[#617589]"
                              placeholder="Paris, Île-de-France"
                              type="text"
                              name="location"
                              value={formData.location}
                              onChange={handleChange}
                            />
                          </div>
                        </div>

                        <div className="mt-4 p-6 border-2 border-dashed border-[#c3c7cc] rounded-xl bg-[#f8f9fa] dark:bg-white/5 flex flex-col items-center gap-4 text-center">
                          <div className="size-16 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <UploadCloud size={32} />
                          </div>
                          <div className="flex flex-col gap-1">
                            <p className="text-[#111418]  font-bold">
                              {formData.brandLogo
                                ? formData.brandLogo.name
                                : "Télécharger votre logo (pour la marque blanche)"}
                            </p>
                            <p className="text-[#617589] text-sm">
                              Format PNG ou JPG, min. 400x400px.
                            </p>
                          </div>
                          <label
                            htmlFor="brand-logo"
                            className="flex min-w-35 cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-white dark:bg-white/10 border border-[#dbe0e6] dark:border-white/20 text-[#111418] text-sm font-bold hover:bg-gray-50 dark:hover:bg-white/20 transition-all"
                          >
                            Choisir un fichier
                          </label>
                          <input
                            id="brand-logo"
                            name="brandLogo"
                            type="file"
                            accept="image/png, image/jpeg"
                            className="hidden"
                            onChange={handleFileChange}
                          />
                        </div>

                        <div className="flex items-start gap-3 p-4 bg-primary/5 rounded-lg border border-primary/20">
                          <Info
                            size={20}
                            className="text-primary shrink-0 mt-0.5"
                          />
                          <p className="text-sm text-[#111418] leading-snug">
                            <strong>Note :</strong> La fonctionnalité &quote;Marque
                            Blanche&quote; permet d&apos;afficher votre logo sur toute la
                            plateforme pour une expérience personnalisée pour
                            vos collaborateurs.
                          </p>
                        </div>
                      </>
                    )}
                  </div>

                  {/* Navigation Footer */}
                  <div className="px-6 py-6 bg-[#f8f9fa] dark:bg-white/5 border-t border-[#e5e7eb] dark:border-white/10 flex justify-between items-center">
                    {currentStep > 1 ? (
                      <button
                        type="button"
                        onClick={handleBack}
                        className="flex items-center gap-2 text-[#617589] font-bold text-sm hover:text-[#111418] transition-colors"
                      >
                        <ArrowLeft size={20} />
                        Retour à l&apos;étape précédente
                      </button>
                    ) : (
                      <Link
                        href="/Signup"
                        className="flex items-center gap-2 text-[#535c66] font-bold text-sm hover:text-[#111418]  transition-colors"
                      >
                        <ArrowLeft size={20} />
                        Annuler
                      </Link>
                    )}
                    <button
                      type="submit"
                      className="flex min-w-45 cursor-pointer items-center justify-center rounded-lg h-12 px-6 bg-primary text-white text-sm font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] transition-all"
                    >
                      {currentStep === 2
                        ? "Créer mon organisation"
                        : "Continuer"}
                    </button>
                  </div>
                </form>
              </div>

              <p className="text-center text-[#373b3f] text-sm pb-10">
                Besoin d&apos;aide ?{" "}
                <a
                  className="text-primary font-medium hover:underline"
                  href="#"
                >
                  Contactez notre équipe de support
                </a>
              </p>
            </>
          )}
        </div>

        {/* Footer */}
        {currentStep === 3 && (
          <footer className="p-6 text-center">
            <p className="text-[#617589] text-xs font-medium">
              © 2024 SCPro360 SAS. Tous droits réservés.
            </p>
          </footer>
        )}
      </main>

      {/* Visual Background Element */}
      <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
        <div className="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-3xl" />
        <div className="absolute -bottom-[10%] -right-[10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-3xl" />
      </div>
    </div>
  );
};

export default OrganizationSignupPage;