"use client";

import React, { useState } from "react";
import Link from "next/link";
import { Eye, EyeClosed, LogIn, Rocket, Settings , Cog, Globe, ChevronDown, ChevronLeft } from "lucide-react";

const LoginPage = () => {
  const [showPassword, setShowPassword] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [rememberMe, setRememberMe] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle login logic here
    console.log("Login:", { email, password, rememberMe });
  };

  return (
    <div className="relative flex min-h-screen 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-[#dbe0e6] px-10 py-3 bg-white dark:bg-background-dark">
        {/* L'ancien logo et header de cette page 
         <div className="flex items-center gap-4">
          <div className="size-8 text-primary">
            <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
              <path
                clipRule="evenodd"
                d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z"
                fill="currentColor"
                fillRule="evenodd"
              />
            </svg>
          </div>
          <Link href="/">
            <h2 className="text-[#111418] text-xl font-bold leading-tight tracking-[-0.015em] cursor-pointer">
              SCPro360
            </h2>
          </Link>
        </div> */}
        <div className="flex items-center gap-3">
          <div className="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
            <span className="material-symbols-outlined text-2xl">
              <Rocket />
            </span>
          </div>
          <h2 className="text-xl font-black leading-tight tracking-tight">
            SCPro360
          </h2>
        </div>
        <div className="flex gap-4">
          <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#f0f2f4] ] cursor-pointer">
            <span className="material-symbols-outlined text-lg"> <Globe /> </span>
            <span className="text-sm font-bold">Français</span>
            <span className="material-symbols-outlined text-sm">
              <ChevronDown />
            </span>
          </div>
          <button className="flex items-center justify-center rounded-lg h-10 w-10 bg-[#f0f2f4]  dark:text-black">
            <span className="material-symbols-outlined"> <Settings /> </span>
          </button>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex flex-1 items-center justify-center p-6">
        <div className="w-full max-w-120 bg-white dark:bg-[#fdfdfd] rounded-xl shadow-xl overflow-hidden border border-[#dfe4eb] ">
          {/* Header Gradient */}
          <div className="w-full h-40 bg-linear-to-r from-primary to-[#00d4ff] flex items-center justify-center relative">
            <div className="absolute inset-0 bg-black/5" />
            <div className="relative z-10 flex flex-col items-center">
              <div className="bg-white/20 backdrop-blur-sm p-4 rounded-full border border-white/30">
                <span className="material-symbols-outlined text-white text-5xl">
                  {" "}
                  <LogIn />{" "}
                </span>
              </div>
            </div>
          </div>

          {/* Form Content */}
          <div className="px-8 pt-8 pb-10">
            <h1 className="text-[#111418] tracking-light text-[32px] font-bold leading-tight text-center pb-2">
              Bienvenue
            </h1>
            <p className="text-[#617589] dark:text-[#646a72] text-base font-normal leading-normal pb-8 text-center">
              Connectez-vous pour accéder à votre espace SCPro360
            </p>

            <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
              {/* Email Input */}
              <div className="flex flex-col gap-1.5">
                <label className="text-[#111418]  text-sm font-semibold">
                  Email ou Nom d'utilisateur
                </label>
                <div className="relative">
                  <input
                    className="form-input w-full rounded-lg text-[#111418] focus:outline-0 focus:ring-2 focus:ring-primary/40 border border-[#dbe0e6] dark:border-[#2d3748] bg-white dark:bg-background-dark h-14 placeholder:text-[#617589] px-4 py-3.5 text-base"
                    placeholder="Entrez votre email ou nom d'utilisateur"
                    type="text"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </div>
              </div>

              {/* Password Input */}
              <div className="flex flex-col gap-1.5">
                <label className="text-[#111418] text-sm font-semibold">
                  Mot de passe
                </label>
                <div className="relative">
                  <input
                    className="form-input w-full rounded-lg text-[#111418] focus:outline-0 focus:ring-2 focus:ring-primary/40 border border-[#dbe0e6] dark:border-[#2d3748] bg-white dark:bg-background-dark h-14 placeholder:text-[#617589] px-4 py-3.5 text-base pr-12"
                    placeholder="Entrez votre mot de passe"
                    type={showPassword ? "text" : "password"}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                  <button
                    className="absolute right-4 top-1/2 -translate-y-1/2 text-black hover:text-primary"
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    <span className="material-symbols-outlined text-gray-600">
                      {showPassword ? <Eye /> : <EyeClosed />}
                    </span>
                  </button>
                </div>
              </div>

              {/* Remember Me & Forgot Password */}
              <div className="flex items-center justify-between pb-2">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    className="rounded text-primary focus:ring-primary border-[#dbe0e6] dark:border-[#2d3748] dark:bg-background-dark"
                    type="checkbox"
                    checked={rememberMe}
                    onChange={(e) => setRememberMe(e.target.checked)}
                  />
                  <span className="text-sm text-[#617589] dark:text-[#646a72]">
                    Se souvenir de moi
                  </span>
                </label>
                <a
                  className="text-sm font-semibold text-primary hover:underline"
                  href="#"
                >
                  Mot de passe oublié ?
                </a>
              </div>

              {/* Submit Button */}
              <button
                type="submit"
                className="w-full bg-primary hover:bg-primary/90 text-white font-bold py-4 rounded-lg text-base shadow-sm transition-all duration-200 cursor-pointer"
              >
                Se connecter
              </button>
            </form>

            {/* Divider */}
            <div className="relative my-8">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-[#dbe0e6] dark:border-[#2d3748]" />
              </div>
              <div className="relative flex justify-center text-sm">
                <span className="bg-white  px-3 text-[#617589] font-medium">
                  Ou continuer avec
                </span>
              </div>
            </div>

            {/* Social Login Buttons */}
            <div className="grid grid-cols-3 gap-4">
              <button
                aria-label="Se connecter avec Google"
                className="flex items-center justify-center h-14 border border-[#dbe0e6] dark:border-gray-400 rounded-lg hover:bg-[linear-gradient(135deg,rgba(66,133,244,0.8),rgba(234,67,53,0.8),rgba(52,168,83,0.8))] hover:text-black transition-all bg-blac dark:bg-white/5 group cursor-pointer"
                // className="flex items-center justify-center h-14 border border-[#dbe0e6] dark:border-[#2d3748] rounded-lg hover:bg-[#f8f9fa] dark:hover:bg-background-dark transition-colors bg-white dark:bg-white/5"
              >
                <svg
                  className="w-6 h-6"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    fill="#4285F4"
                  />
                  <path
                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    fill="#34A853"
                  />
                  <path
                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
                    fill="#FBBC05"
                  />
                  <path
                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    fill="#EA4335"
                  />
                </svg>
              </button>
              <button
                aria-label="Se connecter avec Apple"
                className="flex items-center justify-center h-14 border border-[#dbe0e6] dark:border-gray-400 rounded-lg hover:bg-[#111213] hover:text-white transition-all bg-white dark:bg-white/5 group cursor-pointer"
                // className="flex items-center justify-center h-14 border border-[#dbe0e6] dark:border-[#2d3748] rounded-lg hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-all bg-white dark:bg-white/5"
              >
                <svg
                  className="w-7 h-7 fill-current text-black group-hover:dark:text-white"
                  viewBox="0 0 384 512"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />
                </svg>
              </button>
              <button
                aria-label="Se connecter avec Discord"
                className="flex items-center justify-center h-14 border border-[#dbe0e6] dark:border-gray-400 rounded-lg hover:bg-[#5865F2] hover:text-white transition-all bg-white dark:bg-white/5 group cursor-pointer"
              >
                <svg
                  className="w-7 h-7 fill-current text-[#5865F2] group-hover:text-white"
                  viewBox="0 0 127.14 96.36"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.71,32.65-1.82,56.6.4,80.21a105.73,105.73,0,0,0,32.17,16.15,77.7,77.7,0,0,0,6.89-11.11,68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1,105.25,105.25,0,0,0,32.19-16.14c.45-23.66-4.08-47.61-20.75-72.14ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
                </svg>
              </button>
            </div>

            {/* Sign Up Link */}
            <div className="mt-10 text-center">
              <p className="text-[#617589] dark:text-[#a0aec0] text-sm font-medium">
                Vous n'avez pas de compte ?
                <Link
                  href="/Signup"
                  className="text-primary font-bold hover:underline ml-1"
                >
                  Créer un compte
                </Link>
              </p>
            </div>

            {/* Bouton Retour */}
<div className="mt-8 flex justify-center">
  <Link
    href="/"
    className="text-[#617589] dark:text-gray-400 hover:text-primary transition-colors flex items-center gap-2 font-medium"
  >
    <ChevronLeft size={20}  />
    <span>Retour</span>
  </Link>
</div>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="py-6 text-center text-[#617589] text-xs">
        <p>© 2024 SCPro360. Tous droits réservés.</p>
        <div className="flex justify-center gap-4 mt-2">
          <a className="hover:text-primary" href="#">
            Conditions d'utilisation
          </a>
          <a className="hover:text-primary" href="#">
            Politique de confidentialité
          </a>
        </div>
      </footer>
    </div>
  );
};

export default LoginPage;
