import { useState } from 'react';
import { Input } from './ui/input';
import { Button } from './ui/button';
import { Checkbox } from './ui/checkbox';
import { Label } from './ui/label';
import { User, Lock, Eye, EyeOff } from 'lucide-react';
import svgPaths from '../utils/svgPaths';
import imgLogoTransparent1 from '../assets/b1aeb5848d0b10fda06d6e6b11d13f51105b4fbe.png';
import imgUkFlag from '../assets/7260fbd7cccd7993400c3b1165f33370bf034acd.png';
import imgRttr1 from '../assets/fbdb73205386659c1728f14177a29aac6a81301e.png';

export default function SignInPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [keepSignedIn, setKeepSignedIn] = useState(false);
  const [showPassword, setShowPassword] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Login submitted:', { email, password, keepSignedIn });
    // Add your login logic here
  };

  return (
    <div className="bg-white relative size-full" data-name="Sign In - English">
      <div className="absolute bg-white h-[960px] left-0 overflow-clip top-0 w-[1440px]" data-name="Login Screen">
        {/* Dark background */}
        <div className="absolute bg-[#162b34] h-[960px] left-0 rounded-[43px] top-0 w-[1440px]" data-name="green bg" />
        
        {/* White background for form area */}
        <div className="absolute bg-white h-[960px] left-[calc(41.67%+99px)] top-0 w-[741px]" data-name="white bg" />
        
        {/* Main form body */}
        <div className="absolute content-stretch flex flex-col h-[960px] items-center justify-center left-[calc(41.67%+99px)] top-0 w-[741px]" data-name="body">
          <div className="content-stretch flex flex-col gap-[24px] items-center justify-center max-w-[360px] relative shrink-0 w-full" data-name="Flex Vertical">
            
            {/* Logo graphics on top */}
            <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0">
              <div className="[grid-area:1_/_1] flex h-[125px] items-center justify-center ml-[36px] mt-0 relative w-[117px]">
                <div className="flex-none rotate-[180deg] scale-y-[-100%]">
                  <div className="h-[125px] relative w-[117px]" data-name="logo-transparent 1">
                    <div className="absolute inset-0 overflow-hidden pointer-events-none">
                      <img alt="" className="absolute h-[100.73%] left-[105.84%] max-w-none top-[-0.37%] w-[-293.51%]" src={imgLogoTransparent1} />
                    </div>
                  </div>
                </div>
              </div>
              <div className="[grid-area:1_/_1] h-[67px] ml-0 mt-[124px] relative w-[189px]" data-name="logo-transparent 2">
                <div className="absolute inset-0 overflow-hidden pointer-events-none">
                  <img alt="" className="absolute h-[163.88%] left-[-58.1%] max-w-none top-[-34%] w-[159.15%]" src={imgLogoTransparent1} />
                </div>
              </div>
            </div>

            {/* Sign In text and description */}
            <div className="content-stretch flex flex-col items-start relative shrink-0 w-full" data-name="Div">
              <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full" data-name="Div">
                <p className="font-['Roboto_Condensed:Bold',sans-serif] font-bold leading-[36px] relative shrink-0 text-[#2f4f5c] text-[30px] w-full">Sign In</p>
                <p className="font-['Geist:Regular',sans-serif] font-normal leading-[20px] relative shrink-0 text-[#416270] text-[14px] text-justify w-full">Pick up where you left off – access your legal tools, cross-referenced resources, and engage with trusted professional resources.</p>
              </div>
            </div>

            {/* Form */}
            <form onSubmit={handleSubmit} className="content-stretch flex flex-col gap-[28px] items-start relative shrink-0 w-full" data-name="Form">
              
              {/* Email field */}
              <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0">
                <Label htmlFor="email" className="[grid-area:1_/_1] font-['Geist:Medium',sans-serif] font-medium leading-none ml-0 mt-0 relative text-[#2f4f5c] text-[14px] w-[360px]">
                  Email
                </Label>
                <div className="[grid-area:1_/_1] bg-white min-h-[40px] ml-0 mt-[22.51px] relative rounded-[8px] w-[360px]">
                  <div className="relative">
                    <div className="absolute left-[16px] top-1/2 -translate-y-1/2 z-10">
                      <User className="size-[20px] text-[#b2b2b2]" />
                    </div>
                    <Input
                      id="email"
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder="Email Address"
                      className="h-[40px] w-full pl-[46px] pr-[16px] border-[#c4c4c4] rounded-[8px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] font-['Inter:Regular',sans-serif] text-[14px] placeholder:text-[#b2b2b2]"
                      required
                    />
                  </div>
                </div>
              </div>

              {/* Password field */}
              <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0">
                <Label htmlFor="password" className="[grid-area:1_/_1] font-['Geist:Medium',sans-serif] font-medium leading-none ml-0 mt-0 relative text-[#2f4f5c] text-[14px] w-[360px]">
                  Password
                </Label>
                <div className="[grid-area:1_/_1] bg-white min-h-[40px] ml-0 mt-[22.51px] relative rounded-[8px] w-[360px]">
                  <div className="relative">
                    <div className="absolute left-[16px] top-1/2 -translate-y-1/2 z-10">
                      <Lock className="size-[20px] text-[#b2b2b2]" />
                    </div>
                    <Input
                      id="password"
                      type={showPassword ? 'text' : 'password'}
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      placeholder="Password"
                      className="h-[40px] w-full pl-[46px] pr-[46px] border-[#c4c4c4] rounded-[8px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] font-['Inter:Regular',sans-serif] text-[14px] placeholder:text-[#b2b2b2]"
                      required
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-[16px] top-1/2 -translate-y-1/2 z-10"
                    >
                      {showPassword ? (
                        <EyeOff className="size-[20px] text-[#64748B]" />
                      ) : (
                        <Eye className="size-[20px] text-[#64748B]" />
                      )}
                    </button>
                  </div>
                </div>
              </div>

              {/* Checkbox and forgot password */}
              <div className="content-stretch flex items-center justify-between relative shrink-0 w-full" data-name="Flex">
                <div className="flex items-center gap-[8px]">
                  <Checkbox
                    id="keep-signed-in"
                    checked={keepSignedIn}
                    onCheckedChange={(checked) => setKeepSignedIn(checked as boolean)}
                    className="size-[16px] rounded-[4px] border-[#2f4f5c] data-[state=checked]:bg-[#2f4f5c] data-[state=checked]:text-white"
                  />
                  <Label
                    htmlFor="keep-signed-in"
                    className="font-['Geist:Medium',sans-serif] font-medium text-[#2f4f5c] text-[14px] cursor-pointer"
                  >
                    Keep me signed in
                  </Label>
                </div>
                <a
                  href="#"
                  className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid font-['Geist:Regular',sans-serif] font-normal leading-[20px] text-[#416270] text-[14px] underline hover:text-[#2f4f5c]"
                >
                  Forgot password?
                </a>
              </div>
            </form>

            {/* Sign in button and sign up link */}
            <div className="content-stretch flex flex-col gap-[16px] items-center justify-center relative shrink-0 w-full" data-name="Flex Vertical">
              <Button
                type="submit"
                onClick={handleSubmit}
                className="bg-[#2f4f5c] hover:bg-[#2f4f5c]/90 w-[360px] h-auto px-[16px] py-[8px] rounded-[8px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] font-['Geist:Medium',sans-serif] font-medium text-[#fafafa] text-[14px]"
              >
                Sign in
              </Button>
              <div className="content-stretch flex font-['Geist:Regular',sans-serif] font-normal gap-[4px] items-start justify-center leading-[20px] relative shrink-0 text-[14px] text-center text-nowrap w-full" data-name="Div">
                <p className="relative shrink-0 text-[#416270]">Don't have an account?</p>
                <a
                  href="#"
                  className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid relative shrink-0 text-[#2f4f5c] underline hover:text-[#416270]"
                >
                  Sign up
                </a>
              </div>
            </div>

          </div>
        </div>

        {/* Quote on left side */}
        <p className="absolute font-['Roboto_Condensed:Regular',sans-serif] font-normal leading-[29px] left-[calc(20.83%-167px)] text-[23px] text-justify text-white top-[114px] w-[433px]">
          The specialized research platform for Canadian immigration. Simplify access to laws, manage references effectively, and craft smarter case strategies all in one place.
        </p>
        <p className="absolute font-['Roboto_Condensed:Regular',sans-serif] font-normal h-[25px] leading-[20px] left-[106px] text-[80px] text-white top-[111px] w-[26px]">"</p>
        <p className="absolute font-['Roboto_Condensed:Regular',sans-serif] font-normal h-[20px] leading-[20px] left-[calc(33.33%+86px)] text-[80px] text-white top-[230px] w-[26px]">"</p>

        {/* Language selector */}
        <div className="absolute flex h-[36px] items-center justify-center right-[calc(8.33%+8px)] top-[528px] w-[88px]">
          <div className="flex-none rotate-[180deg] scale-y-[-100%]">
            <div className="h-[36px] relative w-[88px]" data-name="buttons">
              <div className="absolute flex h-[35px] items-center justify-center left-[-87px] top-[-489px] w-[107px]">
                <div className="flex-none rotate-[180deg] scale-y-[-100%]">
                  <button className="content-stretch flex gap-[5px] h-[35px] items-center justify-center px-[16px] py-[8px] relative rounded-[8px] w-[107px] border border-[#b2b2b2] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:bg-gray-50">
                    <div className="h-[12px] relative rounded-[2px] shrink-0 w-[19px]" data-name="UK Flag">
                      <div className="absolute inset-0 overflow-hidden pointer-events-none rounded-[2px]">
                        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgUkFlag} />
                      </div>
                    </div>
                    <div className="flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[#2f4f5c] text-[14px] text-nowrap">
                      <p className="leading-[20px]">English</p>
                    </div>
                    <div className="h-[4.667px] relative shrink-0 w-[8.167px]" data-name="Drop Down">
                      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 8.16675 4.66667">
                        <g id="Drop Down">
                          <path d={svgPaths.p1a6a6880} fill="var(--fill-0, #646464)" id="Shape" />
                        </g>
                      </svg>
                    </div>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="absolute h-[20px] left-[calc(50%+21px)] top-[913px] w-[658px]" data-name="cta">
          <div className="absolute contents font-['Geist:Regular',sans-serif] font-normal left-0 text-[#416270] text-center text-nowrap top-0">
            <p className="absolute leading-[20px] left-[6px] text-[14px] top-0 translate-x-[-50%]">©</p>
            <p className="absolute leading-[20px] left-[126.5px] text-[12px] top-0 translate-x-[-50%]">
              <span>{`2026 - `}</span>
              <span className="font-['Geist:SemiBold',sans-serif] font-semibold">Jurislocator.</span>
              <span>{` All Rights Reserved `}</span>
            </p>
          </div>
          <div className="absolute contents font-['Geist:Regular',sans-serif] font-normal leading-[20px] left-[463px] text-[#416270] text-center text-nowrap top-0">
            <a href="#" className="absolute left-[501px] text-[12px] top-0 translate-x-[-50%] hover:underline">Privacy Policy</a>
            <p className="absolute left-[545.5px] text-[14px] top-0 translate-x-[-50%]">•</p>
            <a href="#" className="absolute left-[605px] text-[12px] top-0 translate-x-[-50%] hover:underline">{`Terms & Conditions`}</a>
          </div>
        </div>

        {/* Team image */}
        <div className="absolute left-[81px] size-[561px] top-[298px]" data-name="rttr 1">
          <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={imgRttr1} />
        </div>
      </div>
    </div>
  );
}