'use client';

import * as React from 'react';
import { CheckCircle2, Lock, XCircle } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Divider from '@/components/ui/divider';
import * as Label from '@/components/ui/label';
import * as PasswordInput from '@/components/ui/password-input';
const defaultLevelColors = {
  1: 'text-error-base',
  2: 'text-warning-base',
  3: 'text-success-base',
};

function LevelBar({
  levels = 3,
  level = 1,
  levelColors = defaultLevelColors,
  className,
  ...rest
}: {
  level: number;
  levels?: number;
  levelColors?: { [key: number]: string };
} & React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={`relative flex gap-2 overflow-hidden rounded-full ${levelColors[1]} ${className} ${levelColors[level]}`}
      {...rest}
    >
      {Array.from({ length: levels }, (_, i) => i).map((currentLevel) => (
        <LevelBarItem
          key={currentLevel}
          level={level}
          levels={levels}
          active={currentLevel < level}
        />
      ))}
    </div>
  );
}

function LevelBarItem({
  levels,
  level,
  ...rest
}: {
  active?: boolean;
  level: number;
  levels: number;
} & React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className='bg-bg-soft-200 h-1 w-full rounded-full'
      style={{
        clipPath: 'inset(0 round 99px)',
      }}
      {...rest}
    >
      <div
        className='absolute top-0 left-0 h-full w-0 rounded-full bg-current duration-500 ease-out'
        style={{
          transitionProperty: 'width',
          width: `calc((100% / ${levels}) * ${level})`,
        }}
      />
    </div>
  );
}

export default function ChangePasswordInputs() {
  const [newPassword, setNewPassword] = React.useState('');

  const [criteria, setCriteria] = React.useState({
    length: false,
    uppercase: false,
    number: false,
  });

  const handleNewPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setNewPassword(value);
    setCriteria({
      length: value.length >= 8,
      uppercase: /[A-Z]/.test(value),
      number: /[0-9]/.test(value),
    });
  };

  const countTrueCriteria = (criteria: { [key: string]: boolean }): number => {
    return Object.values(criteria).filter((value) => value).length;
  };

  const trueCriteriaCount = countTrueCriteria(criteria);

  return (
    <div className='rounded-20 bg-bg-white-0 shadow-custom-md flex w-full max-w-[400px] flex-col p-5'>
      <div className='flex w-full items-center gap-[14px]'>
        <div className='bg-bg-white-0 ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
          <Lock className='text-text-sub-600 size-5' />
        </div>
        <div className='flex flex-col gap-1'>
          <div className='text-label-sm text-text-strong-950'>
            Change Password
          </div>
          <div className='text-paragraph-xs text-text-sub-600'>
            Update password for enhanced account security.
          </div>
        </div>
      </div>

      <div className='my-4 flex h-1 flex-col items-center justify-center'>
        <Divider.Root />
      </div>

      <div className='flex flex-col gap-3'>
        <div className='flex flex-col gap-1'>
          <Label.Root htmlFor='current-password'>
            Current Password
            <Label.Asterisk />
          </Label.Root>
          <PasswordInput.Root
            id='current-password'
            visibilityIconClassName='text-text-soft-400 size-5'
          />
        </div>

        <div className='flex flex-col gap-1'>
          <Label.Root htmlFor='new-password'>
            New Password
            <Label.Asterisk />
          </Label.Root>
          <PasswordInput.Root
            id='new-password'
            value={newPassword}
            onChange={handleNewPasswordChange}
            visibilityIconClassName='text-text-soft-400 size-5'
          />
        </div>
      </div>

      <div className='flex flex-col gap-1 pt-3 pb-2.5'>
        <Label.Root htmlFor='confirm-password'>
          Confirm New Password
          <Label.Asterisk />
        </Label.Root>
        <PasswordInput.Root
          id='confirm-password'
          visibilityIconClassName='text-text-soft-400 size-5'
        />
      </div>

      <div className='flex flex-col gap-2'>
        <LevelBar levels={3} level={trueCriteriaCount} />
        <div className='text-paragraph-xs text-text-sub-600'>
          Must contain at least;
        </div>
        <div className='text-paragraph-xs text-text-sub-600 flex items-center gap-1.5'>
          {criteria.uppercase ? (
            <CheckCircle2 className='text-success-base size-4 shrink-0' />
          ) : (
            <XCircle className='text-text-soft-400 size-4 shrink-0' />
          )}
          At least 1 uppercase
        </div>
        <div className='text-paragraph-xs text-text-sub-600 flex items-center gap-1.5'>
          {criteria.number ? (
            <CheckCircle2 className='text-success-base size-4 shrink-0' />
          ) : (
            <XCircle className='text-text-soft-400 size-4 shrink-0' />
          )}
          At least 1 number
        </div>
        <div className='text-paragraph-xs text-text-sub-600 flex items-center gap-1.5'>
          {criteria.length ? (
            <CheckCircle2 className='text-success-base size-4 shrink-0' />
          ) : (
            <XCircle className='text-text-soft-400 size-4 shrink-0' />
          )}
          At least 8 characters
        </div>
      </div>

      <div className='flex w-full gap-3 pt-5'>
        <Button.Root variant='neutral' mode='stroke' className='flex-1'>
          Discard
        </Button.Root>
        <Button.Root variant='primary' className='flex-1'>
          Apply Changes
        </Button.Root>
      </div>
    </div>
  );
}