'use client';
import { useRouter } from "next/navigation";
import Link from 'next/link';
import { useState, FormEvent } from 'react';
import { Eye, EyeOff } from 'lucide-react';
import { useAuthStore } from "@/_stores/useAuthStore";

const Login: React.FC = () => {
  const router = useRouter()

  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [showPassword, setShowPassword] = useState<boolean>(false);

  const { role, setRole } = useAuthStore();

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!email || !password) {
      return;
    }

    try {
      // const userData = await login({ username: email, password, authType: 'local', role });

      // if (!userData) {
      //   return;
      // }

      // const redirectPath =
      //   userData.role === "manager" ? "/manager/dashboard" : "/candidate/booking";
      // router.push(redirectPath);
      router.push('/login');

    } catch (err) {
      console.error("Login error:", err);
    }
  };

  return (
    <div className="flex items-center justify-center p-0 md:p-10">
      <div className="w-full max-w-md rounded-xl bg-white p-8 shadow-md">
        <h2 className="mb-6 text-center text-2xl font-bold text-gray-800">Login to your account</h2>

        <form onSubmit={handleSubmit} className="space-y-5">
          <div>
            <label htmlFor="email" className="mb-1 block text-sm font-medium text-gray-700">
              Email address
            </label>
            <input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full rounded-md border border-gray-300 px-4 py-2 text-sm shadow-sm focus:border-pink-500 focus:ring-pink-500"
              autoComplete="current-email"
              required
            />
          </div>

          <div>
            <label htmlFor="password" className="mb-1 block text-sm font-medium text-gray-700">
              Password
            </label>
            <div className="relative">
              <input
                id="password"
                type={showPassword ? 'text' : 'password'}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full rounded-md border border-gray-300 px-4 py-2 text-sm shadow-sm focus:border-pink-500 focus:ring-pink-500"
                required
                autoComplete="current-password"
              />
              <button
                type="button"
                onClick={() => setShowPassword((prev) => !prev)}
                className="absolute right-2 top-2.5 text-gray-400 hover:text-gray-600"
                aria-label="Toggle password visibility"
              >
                {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
              </button>
            </div>
          </div>

          {/* Toggle de botones */}
          <div className="mb-4 flex border border-gray-300 rounded-md overflow-hidden text-xs">
            <button
              type="button"
              onClick={() => setRole("candidate")}
              className={`cursor-pointer flex-1 py-1 hover:bg-pink-700 ${role === "candidate" ? "bg-pink-500 text-white" : "bg-white text-black "
                }`}
            >
              Candidate
            </button>
            <button
              type="button"
              onClick={() => setRole("manager")}
              className={`cursor-pointer flex-1 py-1 hover:bg-pink-700 hover:text-white ${role === "manager" ? "bg-pink-500 text-white" : "bg-white text-black"
                }`}
            >
              Manager
            </button>
          </div>

          <button
            type="submit"
            className="w-full rounded-md bg-pink-500 px-4 py-2 text-white transition hover:bg-pink-700 cursor-pointer"
          >
            Log In
          </button>
        </form>

        <p className="mt-6 text-center text-sm text-gray-600">
          Don&apos;t have an account?{' '}
          <Link href="/signup" className="font-medium text-pink-500 hover:underline">
            Sign up
          </Link>
        </p>
      </div>
    </div>
  );
};

export default Login;