import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Button } from "@/components/ui/button"
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from "@/components/ui/tooltip" 
import Link from "next/link" 
import { Info, Mail, Lock, X, EyeOff, Eye } from "lucide-react" 
            
function FormSignIn(){

const [showPassword, setShowPassword] = useState(false)
const [password, setPassword] = useState("")
const [email, setEmail] = useState("")

const togglePasswordVisibility = () => {
    setShowPassword(!showPassword)
}

    return(
        <>
            <div className="bg-zinc-950/60 w-full sm:w-96 p-3 py-3 mt-3 sm:mt-0 sm:border border-zinc-800/70 rounded-3xl flex flex-col gap-4 sm:items-center">
                <div className="flex justify-between w-full items-center">
                    <TooltipProvider delayDuration={0}>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <div className="p-1 hover:bg-zinc-800/40 text-zinc-400 hover:text-white rounded-lg transition-all duration-500">
                                    <Info className="w-5 h-5 " />
                                </div>
                            </TooltipTrigger>
                            <TooltipContent className="mb-1 bg-zinc-950/60 backdrop-blur-md ">
                                <p>ProjectHub</p>
                            </TooltipContent>
                        </Tooltip>
                    </TooltipProvider>
                    <div className="font-semibold">
                        Sign In
                    </div>
                    <TooltipProvider delayDuration={0}>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <div className="p-1 hover:bg-zinc-800/40 rounded-lg text-zinc-400 hover:text-white transition-all duration-500">
                                    <Link href="" className="">
                                        <X className="w-5 h-5 " />
                                    </Link>
                                </div>
                            </TooltipTrigger>
                            <TooltipContent className="mb-1 bg-zinc-950/60 backdrop-blur-md">
                                <p>Go back</p>
                            </TooltipContent>
                        </Tooltip>
                    </TooltipProvider>
                </div>
                <div className="flex flex-col w-full gap-2">
                    <form className="flex flex-col w-full gap-2">
                        <div className="relative">
                            <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <Mail className="h-4 w-4 text-zinc-500" />
                            </div>
                            <Input
                                id="email"
                                type="email"
                                placeholder="Enter your email"
                                className="pl-10 h-12 rounded-xl bg-zinc-800/20 border-zinc-800/20 hover:border-zinc-800 hover:bg-zinc-800/60 transition-all duration-500"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                            />
                        </div>
                        <div className="relative">
                            <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <Lock className="h-4 w-4 text-gray-500" />
                            </div>
                            <Input
                                id="password"
                                type={showPassword ? "text" : "password"}
                                placeholder="Enter your password"
                                className="pl-10 pr-10 h-12 rounded-xl bg-zinc-800/20 border-zinc-800/20 hover:border-zinc-800 hover:bg-zinc-800/60 transition-all duration-500"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                            />
                            <div className="pr-2">
                                <Button
                                    type="button"
                                    variant="ghost"
                                    size="icon"
                                    className="absolute inset-y-1.5 pr-2 right-0 flex items-center justify-center hover:bg-transparent text-gray-500 hover:text-white"
                                    onClick={togglePasswordVisibility}
                                    aria-label={showPassword ? "Hide password" : "Show password"}
                                >
                                    {showPassword ? <EyeOff className="h-4 w-4 " /> : <Eye className="h-4 w-4 " />}
                                </Button>
                            </div>
                        </div>
                        <div className="flex justify-between my-2 px-1">
                            <div className="flex items-center space-x-1 ">
                                <Checkbox id="terms" />
                                <Label htmlFor="terms" className="text-xs text-zinc-400 cursor-pointer">Remember me</Label>
                            </div>
                            <Link href="" className="text-zinc-400 text-xs hover:text-white transition-all duration-500">Forgot password?</Link>
                        </div>
                        <Button className="rounded-xl active:scale-95 h-12 bg-[#28A745] hover:bg-[#218838] transition-all duration-500">Sign In</Button>
                        <div className="flex justify-center w-full mt-2">
                            <div className="text-xs text-zinc-400">Don't have an account? <Link href="" className="text-[#28A745]">Sign Up</Link></div>
                        </div>
                    </form>
                </div>
            </div>
        </>
    )
}
export default FormSignIn