import { Eye,EyeOff } from "lucide-react";
import FormInput from "@/components/common/formInput";
import Button from "@/components/common/button";
import { useState } from "react";

import {Props} from "@/types/types"
import { signIn } from "next-auth/react";


export default function LoginForm({ onSuccess,onForgotPassword }: Props) {

  const [showPassword, setShowPassword] = useState(false);// For Visibility of Password 
  return (
    
<div className="w-full max-w-md space-y-3">
      {/* Header text container */}
      <div>
        <h2 className="text-2xl font-bold tracking-tight text-white">
          Sign in to your account
        </h2>
        <p className="mt-3 text-[15px] text-slate-400">
          Use your registered work credentials.
        </p>
      </div>

      {/* Field Elements */}
      <div className="space-y-2">
        <FormInput
          label="Email"
          value="dhananjay@kafm.io"
        
          
        />

      <div className="relative">
       // Password Input
  <FormInput
    label="PASSWORD"
    value=""
    type={showPassword ? "text" : "password"}
   
  />

  <Button
   
    onClick={() => setShowPassword(!showPassword)}
    className="absolute right-4 top-[35px] text-slate-500 hover:text-slate-300"
  >
    {showPassword ?   <Eye size={18} /> :<EyeOff size={18} />}
  </Button>
</div>
      </div>

      {/* Interactive options row */}
      <div className="flex items-center justify-between text-sm">
        <label className="flex cursor-pointer items-center gap-2.5 text-slate-300 select-none">
          <input
            type="checkbox"
            defaultChecked
            className="h-4 w-4 rounded border-slate-700 bg-slate-900 accent-teal-400 focus:ring-0 focus:ring-offset-0"
          />
          Keep me signed in
        </label>

        <Button
         
          onClick={onForgotPassword}
          className="font-medium text-teal-400 transition hover:text-teal-300 bg-transparent border-0 p-0 cursor-pointer"
        >
          Forgot password?
        </Button>
      </div>

      {/* Action on Button */}
      <div className="space-y-4">
        <Button
          onClick={onSuccess}
          className="h-10 w-full rounded-lg bg-gradient-to-r from-teal-400 to-emerald-400 font-semibold text-slate-950 shadow-md hover:opacity-95 transition"
        >
          Sign in
        </Button>

        {/* Divider */}
        <div className="flex items-center gap-4 py-2">
          <div className="h-px flex-1 bg-slate-800" />
          <span className="text-xs uppercase tracking-wider text-slate-600 font-medium">or</span>
          <div className="h-px flex-1 bg-slate-800" />
        </div>

        <Button 
        onClick={() => signIn("keycloak", {
      callbackUrl: "/dashboard",
    })}
          className="h-10 w-full rounded-lg border border-slate-800 bg-[#122031] text-sm font-semibold text-white hover:bg-[#17293e] transition"
        >
          Sign in with SSO
        </Button>
      </div>

      {/* Bottom  Info */}
      <p className="text-center text-xs tracking-wide text-slate-500 font-mono">
        Protected by 2-factor auth • every sign-in is
        <br/> audit-logged
      </p>
    </div>

    
  );
}