'use client';

import { AlignInfoFillIcon as IconInfoCustomFill } from '@/components/misc/alignui-icons';
import * as React from 'react';
import { Info } from 'lucide-react';

import * as Avatar from '@/components/ui/avatar';
import * as Button from '@/components/ui/button';
import * as Divider from '@/components/ui/divider';
import * as Drawer from '@/components/ui/drawer';
import * as Hint from '@/components/ui/hint';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import * as Select from '@/components/ui/select';
import * as Textarea from '@/components/ui/textarea';
import Image from 'next/image';

const timezones = [
  { value: 'gmt-12', label: 'GMT-12:00 - Baker Island Time' },
  { value: 'gmt-8', label: 'GMT-8:00 - Pacific Standard Time' },
  { value: 'gmt-5', label: 'GMT-5:00 - Eastern Standard Time' },
  { value: 'gmt-4', label: 'GMT-4:00 - Atlantic Standard Time' },
  { value: 'gmt0', label: 'GMT+0:00 - Greenwich Mean Time' },
  { value: 'gmt1', label: 'GMT+1:00 - Central European Time' },
  { value: 'gmt3', label: 'GMT+3:00 - Eastern European Time' },
  { value: 'gmt8', label: 'GMT+8:00 - China Standard Time' },
];

const languages = [
  { value: 'en', label: 'English (US)', flag: 'US' },
  { value: 'de', label: 'Deutsch', flag: 'DE' },
  { value: 'fr', label: 'Français', flag: 'FR' },
  { value: 'tr', label: 'Türkçe', flag: 'TR' },
];

export default function ProfileEditDrawer() {
  const [open, setOpen] = React.useState(false);
  const [selectedTimezone, setSelectedTimezone] = React.useState('gmt-4');
  const [selectedLanguage, setSelectedLanguage] = React.useState('en');
  const [biography, setBiography] = React.useState('');
  return (
    <div className='bg-bg-white-0 flex min-h-screen items-center justify-center'>
      <Drawer.Root open={open} onOpenChange={setOpen}>
        <Drawer.Trigger asChild>
          <Button.Root variant='neutral' mode='stroke'>
            Open Profile
          </Button.Root>
        </Drawer.Trigger>

        <Drawer.Content className='rounded-20 bg-bg-white-0 shadow-custom-md absolute inset-y-0 mx-2 my-2 max-h-[calc(100%-16px)] w-[min(400px,calc(100%-16px))]'>
          <div className='flex h-full flex-col'>
            <Drawer.Header>
              <Drawer.Title className='text-label-lg text-text-strong-950'>
                Profile
              </Drawer.Title>
            </Drawer.Header>

            <Divider.Root variant='solid-text'>UPLOAD IMAGE</Divider.Root>

            <Drawer.Body className='flex-1 overflow-y-auto'>
              {/* Avatar Upload */}
              <div className='flex gap-5 p-5'>
                <Avatar.Root size='64' />
                <div className='space-y-3'>
                  <div className='space-y-1'>
                    <div className='text-label-md text-text-strong-950'>
                      Upload Image
                    </div>
                    <div className='text-paragraph-sm text-text-sub-600'>
                      Min 400x400px, PNG or JPEG
                    </div>
                  </div>
                  <div className='flex gap-3'>
                    <Button.Root variant='neutral' mode='stroke' size='xsmall'>
                      Upload
                    </Button.Root>
                  </div>
                </div>
              </div>

              <Divider.Root variant='solid-text'>INFORMATION</Divider.Root>

              {/* Form Fields */}
              <div className='space-y-3 p-5'>
                <div className='flex flex-col gap-1'>
                  <Label.Root htmlFor='fullname'>
                    Full Name <Label.Asterisk />
                  </Label.Root>
                  <Input.Root>
                    <Input.Wrapper>
                      <Input.Input
                        id='fullname'
                        type='text'
                        placeholder='Sophia Williams'
                        required
                      />
                    </Input.Wrapper>
                  </Input.Root>
                </div>

                <div className='space-y-1.5'>
                  <Label.Root htmlFor='title'>
                    Title <Label.Asterisk />
                  </Label.Root>
                  <Input.Root>
                    <Input.Wrapper>
                      <Input.Input
                        id='title'
                        type='text'
                        placeholder='e.g. UI/UX Designer'
                        required
                      />
                    </Input.Wrapper>
                  </Input.Root>
                </div>

                <div className='space-y-1.5'>
                  <Label.Root htmlFor='biography'>
                    Biography <Label.Sub>(Optional)</Label.Sub>
                  </Label.Root>
                  <Input.Root>
                    <Textarea.Root
                      placeholder='Describe yourself...'
                      className='min-h-[50px]'
                      id='biography'
                      value={biography}
                      onChange={(e) => setBiography(e.target.value)}
                      maxLength={200}
                    >
                      <Textarea.CharCounter
                        current={biography.length}
                        max={200}
                      />
                    </Textarea.Root>
                  </Input.Root>
                  <Hint.Root>
                    <Hint.Icon as={Info} />
                    It will be displayed on your profile.
                  </Hint.Root>
                </div>
              </div>

              <Divider.Root variant='solid-text'>
                REGIONAL PREFERENCES
              </Divider.Root>

              <div className='space-y-3 p-5'>
                <div className='space-y-1.5'>
                  <Label.Root htmlFor='timezone'>
                    Timezone <Label.Asterisk />{' '}
                    <IconInfoCustomFill className='text-text-disabled-300 size-5' />
                  </Label.Root>
                  <Select.Root
                    defaultValue='gmt-4'
                    value={selectedTimezone}
                    onValueChange={setSelectedTimezone}
                  >
                    <Select.Trigger className='w-full'>
                      <Select.Value>
                        {
                          timezones.find((tz) => tz.value === selectedTimezone)
                            ?.label
                        }
                      </Select.Value>
                    </Select.Trigger>
                    <Select.Content>
                      {timezones.map((timezone) => (
                        <Select.Item
                          key={timezone.value}
                          value={timezone.value}
                        >
                          {timezone.label}
                        </Select.Item>
                      ))}
                    </Select.Content>
                  </Select.Root>
                </div>

                <div className='space-y-1.5'>
                  <Label.Root htmlFor='language'>
                    Language <Label.Asterisk />
                  </Label.Root>
                  <Select.Root
                    defaultValue='en'
                    value={selectedLanguage}
                    onValueChange={setSelectedLanguage}
                  >
                    <Select.Trigger className='w-full'>
                      <Select.Value>
                        <div className='flex items-center gap-2'>
                          <Image
                            src={`https://alignui.com/flags/${languages.find((lang) => lang.value === selectedLanguage)?.flag}.svg`}
                            className='size-5 rounded-sm'
                            alt=''
                            width={20}
                            height={20}
                          />
                          {
                            languages.find(
                              (lang) => lang.value === selectedLanguage,
                            )?.label
                          }
                        </div>
                      </Select.Value>
                    </Select.Trigger>
                    <Select.Content>
                      {languages.map((language) => (
                        <Select.Item
                          key={language.value}
                          value={language.value}
                        >
                          <Select.ItemIcon
                            style={{
                              backgroundImage: `url(https://alignui.com/flags/${language.flag}.svg)`,
                            }}
                            className='size-5 rounded-sm'
                          />
                          {language.label}
                        </Select.Item>
                      ))}
                    </Select.Content>
                  </Select.Root>
                </div>
              </div>
            </Drawer.Body>

            <Drawer.Footer className='border-stroke-soft-200 flex justify-between gap-3 border-t p-5'>
              <Button.Root
                variant='neutral'
                mode='stroke'
                size='medium'
                className='flex-1'
                onClick={() => setOpen(false)}
              >
                Discard
              </Button.Root>
              <Button.Root
                variant='primary'
                size='medium'
                className='flex-1'
                onClick={() => setOpen(false)}
              >
                Apply Changes
              </Button.Root>
            </Drawer.Footer>
          </div>
        </Drawer.Content>
      </Drawer.Root>
    </div>
  );
}