'use client';

import * as React from 'react';
import * as LabelPrimitive from '@radix-ui/react-label';
import { Mail, UserRound } from 'lucide-react';

import * as Checkbox from '@/components/ui/checkbox';
import * as Divider from '@/components/ui/divider';
import * as FancyButton from '@/components/ui/fancy-button';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import * as LinkButton from '@/components/ui/link-button';
import * as PasswordInput from '@/components/ui/password-input';
import { cn } from '@/utils/cn';

export default function SimpleLoginCard() {
  return (
    <div className='rounded-20 bg-bg-white-0 flex w-full max-w-[440px] flex-col gap-6 p-5 md:p-8'>
      <div className='flex flex-col items-center gap-2'>
        {/* icon */}
        <div
          className={cn(
            'relative flex size-[68px] shrink-0 items-center justify-center rounded-full backdrop-blur-xl md:size-24',
            // bg
            'before:absolute before:inset-0 before:rounded-full',
            'before:bg-gradient-to-b before:from-neutral-500 before:to-transparent before:opacity-10',
          )}
        >
          <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 relative z-10 flex size-12 items-center justify-center rounded-full ring-1 ring-inset md:size-16'>
            <UserRound className='text-text-sub-600 size-6 md:size-8' />
          </div>
        </div>

        <div className='space-y-1 text-center'>
          <div className='text-title-h6 text-text-strong-950 md:text-title-h5'>
            Login to your account
          </div>
          <div className='text-paragraph-sm text-text-sub-600 md:text-paragraph-md'>
            Enter your details to login.
          </div>
        </div>
      </div>

      <Divider.Root />

      <div className='flex flex-col gap-3'>
        <div className='flex flex-col gap-1'>
          <Label.Root htmlFor='email'>
            Email Address <Label.Asterisk />
          </Label.Root>
          <Input.Root>
            <Input.Wrapper>
              <Input.Icon as={Mail} />
              <Input.Input
                id='email'
                type='email'
                placeholder='hello@alignui.com'
                required
              />
            </Input.Wrapper>
          </Input.Root>
        </div>

        <div className='flex flex-col gap-1'>
          <Label.Root htmlFor='password'>
            Password <Label.Asterisk />
          </Label.Root>
          <PasswordInput.Root id='password' required />
        </div>
      </div>

      <div className='flex items-center justify-between gap-4'>
        <div className='flex items-start gap-2'>
          <Checkbox.Root id='agree' />
          <LabelPrimitive.Root
            htmlFor='agree'
            className='text-paragraph-sm block cursor-pointer'
          >
            Keep me logged in
          </LabelPrimitive.Root>
        </div>
        <LinkButton.Root variant='gray' size='medium' underline>
          Forgot password?
        </LinkButton.Root>
      </div>

      <FancyButton.Root variant='primary' size='medium'>
        Login
      </FancyButton.Root>
    </div>
  );
}