"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Heart, Eye, EyeOff, X } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/navigation";

export default function Login() {
  const [showPassword, setShowPassword] = useState(false);
  const [rememberMe, setRememberMe] = useState(false);
  const router = useRouter();

    return (
    <div className="min-h-screen relative flex items-center justify-center px-4 py-12">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <Image
          src="/doctors.png"
          alt="Medical professionals"
          fill
          className="object-cover object-center"
          priority
          sizes="100vw"
        />
        {/* Overlay for better readability */}
        <div className="absolute inset-0 bg-black/20"></div>
      </div>

      {/* Branding - Top Left */}
      <div className="absolute top-8 left-8 flex items-center gap-3 z-30">
        <Heart className="w-6 h-6 text-white" fill="white" />
        <span className="text-white text-xl font-semibold">Attune Heart Therapy</span>
      </div>



      {/* Centered White Card - Login Form */}
      <div className="relative z-20 w-full max-w-md bg-white rounded-2xl shadow-2xl p-8">
        {/* Close Button */}
        <Button
          onClick={() => router.back()}
          variant="ghost"
          size="icon"
          className="ml-auto mb-6 w-8 h-8 rounded-full"
          aria-label="Close"
        >
          <X className="w-5 h-5 text-black" />
        </Button>

        {/* Heading */}
        <h1 className="text-3xl font-bold text-black mb-2">
          Welcome back
        </h1>

        {/* Sign Up Prompt */}
        <p className="text-gray-600 mb-8">
          New to Attune Heart Therapy?{" "}
          <Link href="/signup" className="text-blue-600 underline font-medium">
            Sign up
          </Link>
        </p>

        {/* Login Form */}
        <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
          {/* Email Field */}
          <div className="space-y-2">
            <label htmlFor="email" className="text-sm font-medium text-black">
              Email address
            </label>
            <Input
              id="email"
              type="email"
              placeholder="Email address"
              className="h-12 bg-white border-gray-300"
              required
            />
          </div>

          {/* Password Field */}
          <div className="space-y-2">
            <label htmlFor="password" className="text-sm font-medium text-black">
              Your password
            </label>
            <div className="relative">
              <Input
                id="password"
                type={showPassword ? "text" : "password"}
                placeholder="Your password"
                className="h-12 bg-white border-gray-300 pr-12"
                required
              />
              <Button
                type="button"
                variant="ghost"
                size="icon"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-4 top-1/2 -translate-y-1/2 h-auto w-auto p-0 text-gray-500 hover:text-gray-700"
                aria-label={showPassword ? "Hide password" : "Show password"}
              >
                {showPassword ? (
                  <EyeOff className="w-5 h-5" />
                ) : (
                  <Eye className="w-5 h-5" />
                )}
              </Button>
            </div>
          </div>

          {/* Submit Button */}
          <Button
            type="submit"
            className="w-full h-12 text-base font-semibold bg-[#4A90A4] hover:bg-[#3a7a8a] text-white"
          >
            Log in
          </Button>

          {/* Remember Me & Forgot Password */}
          <div className="flex items-center justify-between text-sm">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={rememberMe}
                onChange={(e) => setRememberMe(e.target.checked)}
                className="w-4 h-4 rounded border-gray-300 text-[#4A90A4] focus:ring-2 focus:ring-[#4A90A4] cursor-pointer"
              />
              <span className="text-black">Remember me</span>
            </label>
            <Link
              href="/forgot-password"
              className="text-blue-600 hover:text-blue-700 font-medium"
            >
              Forgot password?
            </Link>
          </div>

        </form>
      </div>
    </div>
  );
}