'use client';

import { AlignInfoIcon as IconInfoCustom } from '@/components/misc/alignui-icons';
import * as React from 'react';
import * as Accordion from '@radix-ui/react-accordion';
import {
  Contact,
  UserCircle,
  ChevronDown,
  ChevronUp,
  Cake,
  Check,
  X,
  Mail,
  MapPin,
  PenLine,
  Settings2,
  Smartphone,
  Briefcase,
  UserRound,
  UserCog,
} from 'lucide-react';

import * as Badge from '@/components/ui/badge';
import * as Button from '@/components/ui/button';
import * as CompactButton from '@/components/ui/compact-button';
import * as Input from '@/components/ui/input';
import * as Modal from '@/components/ui/modal';

type FormData = {
  fullName: string;
  phone: string;
  dateOfBirth: string;
  occupation: string;
  email: string;
  address: string;
  username: string;
  language: string;
  bio: string;
  company: string;
  website: string;
};

const InputWithIcons = ({
  value,
  onChange,
  size: _size,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement>) => {
  const [isFocused, setIsFocused] = React.useState(false);
  const { input } = Input.inputVariants();
  const { root: compactButtonRoot, icon: compactButtonIcon } =
    CompactButton.compactButtonVariants({ variant: 'ghost' });

  const handleClear = () => {
    const event = {
      target: { name: props.name, value: '' },
    } as React.ChangeEvent<HTMLInputElement>;
    onChange?.(event);
  };

  const handleComplete = () => {
    console.log('Completed:', value);
  };

  return (
    <Input.Root
      className={`${!isFocused ? 'shadow-none before:!ring-0' : 'before:!ring-1'}`}
    >
      <Input.Wrapper>
        <input
          {...props}
          value={value}
          onChange={onChange}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          className={input({ size: 'small' })}
        />
        {isFocused && (
          <>
            <CompactButton.Root
              variant='ghost'
              onClick={handleClear}
              className={compactButtonRoot()}
            >
              <X className={compactButtonIcon()} />
            </CompactButton.Root>
            <CompactButton.Root
              variant='ghost'
              onClick={handleComplete}
              className={compactButtonRoot()}
            >
              <Check className={compactButtonIcon()} />
            </CompactButton.Root>
          </>
        )}
      </Input.Wrapper>
    </Input.Root>
  );
};

export default function AccountSetupModal() {
  const [open, setOpen] = React.useState(true);
  const [formData, setFormData] = React.useState<FormData>({
    fullName: '',
    phone: '',
    dateOfBirth: '',
    occupation: '',
    email: '',
    address: '',
    username: '',
    language: '',
    bio: '',
    company: '',
    website: '',
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value.replace(/\D/g, '');
    const masked = value
      .replace(/^(\d{3})/, '($1) ')
      .replace(/^(\(\d{3}\) )(\d{3})/, '$1$2-')
      .replace(/(\d{4})\d+?$/, '$1')
      .slice(0, 14);

    const event = {
      target: { name: 'phone', value: masked },
    } as React.ChangeEvent<HTMLInputElement>;

    handleInputChange(event);
  };

  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value.replace(/[^\d/]/g, '');
    const masked = value
      .replace(/^(\d{2})(\d)/, '$1/$2')
      .replace(/^(\d{2}\/\d{2})(\d)/, '$1/$2')
      .slice(0, 10);

    const event = {
      target: { name: 'dateOfBirth', value: masked },
    } as React.ChangeEvent<HTMLInputElement>;

    handleInputChange(event);
  };

  const handleSubmit = () => {
    console.log('Form data:', formData);
    setOpen(false);
  };

  return (
    <Modal.Root defaultOpen open={open} onOpenChange={setOpen}>
      <Modal.Trigger asChild>
        <Button.Root variant='neutral' mode='stroke'>
          Open Modal
        </Button.Root>
      </Modal.Trigger>
      <Modal.Content className='rounded-40 shadow-custom-md w-full max-w-[520px]'>
        <Modal.Header
          title='Account Setup'
          description='Complete simple steps to get started.'
          icon={UserCog}
        />

        <Modal.Body className='flex flex-col gap-5'>
          {/* Required Information */}
          <Accordion.Root
            type='single'
            defaultValue='required'
            collapsible
            className='w-full'
          >
            <Accordion.Item value='required'>
              <Accordion.Trigger className='group flex w-full items-center'>
                <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'>
                    <Contact className='text-text-sub-600 size-5' />
                  </div>
                  <div className='flex min-w-0 flex-1 items-center'>
                    <div className='flex min-w-0 flex-1 flex-col items-start gap-1'>
                      <div className='flex w-full min-w-0 items-start gap-1'>
                        <span className='text-label-sm text-text-strong-950 overflow-hidden text-ellipsis whitespace-nowrap'>
                          Required Information
                        </span>
                        <IconInfoCustom className='shrink-0' />
                      </div>
                      <div className='w-full text-left'>
                        <span className='text-paragraph-xs text-text-sub-600 block overflow-hidden text-ellipsis whitespace-nowrap'>
                          Provide required information.
                        </span>
                      </div>
                    </div>
                    <div className='flex shrink-0 items-center gap-3'>
                      <Badge.Root
                        variant='lighter'
                        color='orange'
                        size='medium'
                        className='ml-auto'
                      >
                        In Progress
                      </Badge.Root>
                      <CompactButton.Root
                        variant='stroke'
                        className='!size-6 flex-1 shrink-0 rounded-full group-data-[state=open]:border-0'
                      >
                        <ChevronDown className='text-text-soft-400 size-5 group-data-[state=open]:hidden' />
                        <ChevronUp className='bg-bg-surface-800 size-5 rounded-full text-white group-data-[state=closed]:hidden group-data-[state=open]:block' />
                      </CompactButton.Root>
                    </div>
                  </div>
                </div>
              </Accordion.Trigger>
              <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
                <div className='bg-bg-white-0 data-[state=closed]:border-stroke-soft-200 rounded-xl pt-3 pb-0 pl-[54px] data-[state=closed]:border'>
                  <div className='border-stroke-soft-200 flex flex-col gap-2 rounded-xl border px-3 py-2'>
                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <UserRound className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Full Name
                        </span>
                      </div>
                      <InputWithIcons
                        id='fullName'
                        name='fullName'
                        placeholder='Full Name'
                        value={formData.fullName}
                        onChange={handleInputChange}
                      />
                    </div>

                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <Smartphone className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Phone
                        </span>
                      </div>
                      <InputWithIcons
                        id='phone'
                        name='phone'
                        placeholder='Phone'
                        value={formData.phone}
                        onChange={handlePhoneChange}
                      />
                    </div>

                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <Cake className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Date of Birth
                        </span>
                      </div>
                      <InputWithIcons
                        id='dateOfBirth'
                        name='dateOfBirth'
                        type='text'
                        placeholder='dd/mm/yyyy'
                        value={formData.dateOfBirth}
                        onChange={handleDateChange}
                      />
                    </div>

                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <Briefcase className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Occupation
                        </span>
                      </div>
                      <InputWithIcons
                        id='occupation'
                        name='occupation'
                        placeholder='Occupation'
                        value={formData.occupation}
                        onChange={handleInputChange}
                      />
                    </div>

                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <Mail className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Email
                        </span>
                      </div>
                      <InputWithIcons
                        id='email'
                        name='email'
                        type='email'
                        placeholder='Enter email address...'
                        value={formData.email}
                        onChange={handleInputChange}
                      />
                    </div>

                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <MapPin className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Address
                        </span>
                      </div>
                      <InputWithIcons
                        id='address'
                        name='address'
                        placeholder='Enter address...'
                        value={formData.address}
                        onChange={handleInputChange}
                      />
                    </div>
                  </div>
                </div>
              </Accordion.Content>
            </Accordion.Item>
          </Accordion.Root>

          {/* Profile Customization */}
          <Accordion.Root type='single' collapsible className='w-full'>
            <Accordion.Item value='profile'>
              <Accordion.Trigger className='group flex w-full items-center'>
                <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'>
                    <Settings2 className='text-text-sub-600 size-5' />
                  </div>
                  <div className='flex min-w-0 flex-1 items-center'>
                    <div className='flex min-w-0 flex-1 flex-col items-start gap-1'>
                      <div className='flex w-full min-w-0 items-start gap-1'>
                        <span className='text-label-sm text-text-strong-950 overflow-hidden text-ellipsis whitespace-nowrap'>
                          Profile Customization
                        </span>
                        <IconInfoCustom className='shrink-0' />
                      </div>
                      <div className='w-full text-left'>
                        <span className='text-paragraph-xs text-text-sub-600 block overflow-hidden text-ellipsis whitespace-nowrap'>
                          Provide information for profile customization.
                        </span>
                      </div>
                    </div>
                    <div className='flex shrink-0 items-center gap-3'>
                      <Badge.Root
                        variant='lighter'
                        color='gray'
                        size='medium'
                        className='shrink-0'
                      >
                        Incomplete
                      </Badge.Root>
                      <CompactButton.Root
                        variant='stroke'
                        className='shrink-0 rounded-full group-data-[state=open]:border-0'
                      >
                        <ChevronDown className='text-text-soft-400 size-5 group-data-[state=open]:hidden' />
                        <ChevronUp className='bg-bg-surface-800 size-5 rounded-full text-white group-data-[state=closed]:hidden group-data-[state=open]:block' />
                      </CompactButton.Root>
                    </div>
                  </div>
                </div>
              </Accordion.Trigger>
              <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
                <div className='bg-bg-white-0 data-[state=closed]:border-stroke-soft-200 rounded-xl pt-3 pb-0 pl-[54px] data-[state=closed]:border'>
                  <div className='border-stroke-soft-200 flex flex-col gap-2 rounded-xl border px-3 py-2'>
                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <UserCircle className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Username
                        </span>
                      </div>
                      <InputWithIcons
                        id='username'
                        name='username'
                        placeholder='Enter username...'
                        value={formData.username}
                        onChange={handleInputChange}
                      />
                    </div>

                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <Settings2 className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Language
                        </span>
                      </div>
                      <InputWithIcons
                        id='language'
                        name='language'
                        placeholder='Select language...'
                        value={formData.language}
                        onChange={handleInputChange}
                      />
                    </div>
                  </div>
                </div>
              </Accordion.Content>
            </Accordion.Item>
          </Accordion.Root>

          {/* Optional Information */}
          <Accordion.Root type='single' collapsible className='w-full'>
            <Accordion.Item value='optional'>
              <Accordion.Trigger className='group flex w-full items-center'>
                <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'>
                    <PenLine className='text-text-sub-600 size-5' />
                  </div>
                  <div className='flex min-w-0 flex-1 items-center'>
                    <div className='flex min-w-0 flex-1 flex-col items-start gap-1'>
                      <div className='flex w-full min-w-0 items-start gap-1'>
                        <span className='text-label-sm text-text-strong-950 overflow-hidden text-ellipsis whitespace-nowrap'>
                          Optional Information
                        </span>
                        <IconInfoCustom className='shrink-0' />
                      </div>
                      <div className='w-full text-left'>
                        <span className='text-paragraph-xs text-text-sub-600 block overflow-hidden text-ellipsis whitespace-nowrap'>
                          Provide optional information.
                        </span>
                      </div>
                    </div>
                    <div className='flex shrink-0 items-center gap-3'>
                      <Badge.Root
                        variant='lighter'
                        color='gray'
                        size='medium'
                        className='shrink-0'
                      >
                        Incomplete
                      </Badge.Root>
                      <CompactButton.Root
                        variant='stroke'
                        className='shrink-0 rounded-full group-data-[state=open]:border-0'
                      >
                        <ChevronDown className='text-text-soft-400 size-5 group-data-[state=open]:hidden' />
                        <ChevronUp className='bg-bg-surface-800 size-5 rounded-full text-white group-data-[state=closed]:hidden group-data-[state=open]:block' />
                      </CompactButton.Root>
                    </div>
                  </div>
                </div>
              </Accordion.Trigger>
              <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
                <div className='bg-bg-white-0 data-[state=closed]:border-stroke-soft-200 rounded-xl pt-3 pb-0 pl-[54px] data-[state=closed]:border'>
                  <div className='border-stroke-soft-200 flex flex-col gap-2 rounded-xl border px-3 py-2'>
                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <PenLine className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Bio
                        </span>
                      </div>
                      <InputWithIcons
                        id='bio'
                        name='bio'
                        placeholder='Write something about yourself...'
                        value={formData.bio}
                        onChange={handleInputChange}
                      />
                    </div>

                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <Briefcase className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Company
                        </span>
                      </div>
                      <InputWithIcons
                        id='company'
                        name='company'
                        placeholder='Enter company name...'
                        value={formData.company}
                        onChange={handleInputChange}
                      />
                    </div>

                    <div className='flex flex-row items-center gap-[15px]'>
                      <div className='flex flex-row items-center gap-2'>
                        <MapPin className='text-text-sub-600 size-5 shrink-0' />
                        <span className='text-paragraph-sm text-text-sub-600 w-[60px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap md:w-[92px]'>
                          Website
                        </span>
                      </div>
                      <InputWithIcons
                        id='website'
                        name='website'
                        placeholder='Enter website URL...'
                        value={formData.website}
                        onChange={handleInputChange}
                      />
                    </div>
                  </div>
                </div>
              </Accordion.Content>
            </Accordion.Item>
          </Accordion.Root>
        </Modal.Body>

        <Modal.Footer>
          <div className='flex w-full items-center justify-end gap-3'>
            <Button.Root
              variant='neutral'
              mode='stroke'
              onClick={() => setOpen(false)}
              className='flex-1'
            >
              Skip
            </Button.Root>
            <Button.Root
              variant='primary'
              onClick={handleSubmit}
              className='flex-1'
            >
              Proceed
            </Button.Root>
          </div>
        </Modal.Footer>
      </Modal.Content>
    </Modal.Root>
  );
}