'use client';

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

import * as Button from '@/components/ui/button';
import * as Divider from '@/components/ui/divider';
import * as Drawer from '@/components/ui/drawer';
import * as Label from '@/components/ui/label';
import * as Radio from '@/components/ui/radio';
import * as Select from '@/components/ui/select';
import Image from 'next/image';

export default function GeneralSettingsDrawer({
  containerClassName,
}: {
  containerClassName?: string;
}) {
  const [open, setOpen] = React.useState(false);
  const [language, setLanguage] = React.useState('en');
  const [timezone, setTimezone] = React.useState('gmt-4');
  const [timeFormat, setTimeFormat] = React.useState('24');
  const [dateFormat, setDateFormat] = React.useState('DD/MM/YY');
  const [lightMode, setLightMode] = React.useState('light');
  const [systemMode, setSystemMode] = React.useState('system');

  const languages = [
    { value: 'en', label: 'English (US)', flag: 'US' },
    { value: 'tr', label: 'Türkçe', flag: 'TR' },
  ];

  const timezones = [
    { value: 'gmt-4', label: 'GMT-4:00 - Atlantic Standard Time' },
    { value: 'gmt0', label: 'GMT+0:00 - Greenwich Mean Time' },
  ];

  const timeFormats = [
    { value: '12', label: '12 Hours' },
    { value: '24', label: '24 Hours' },
  ];

  const dateFormats = [
    { value: 'DD/MM/YY', label: 'DD/MM/YY' },
    { value: 'MM/DD/YY', label: 'MM/DD/YY' },
  ];

  return (
    <div className={containerClassName}>
      <Drawer.Root open={open} onOpenChange={setOpen}>
        <Drawer.Trigger asChild>
          <Button.Root variant='neutral' mode='stroke'>
            General Settings
          </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 className='items-start'>
              <Drawer.Title>
                <div className='flex flex-col gap-1'>
                  <span className='text-label-lg text-text-strong-950'>
                    General Settings
                  </span>
                  <div className='text-paragraph-sm text-text-sub-600'>
                    Personalize and configure options.
                  </div>
                </div>
              </Drawer.Title>
            </Drawer.Header>

            <Drawer.Body className='flex-1'>
              <Divider.Root variant='solid-text'>
                REGIONAL PREFERENCES
              </Divider.Root>

              <div className='flex flex-col gap-3 p-5'>
                <div className='flex flex-col gap-1'>
                  <Label.Root
                    htmlFor='language'
                    className='text-label-sm text-text-strong-950'
                  >
                    Language <Label.Asterisk />
                  </Label.Root>
                  <Select.Root value={language} onValueChange={setLanguage}>
                    <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 === language)?.flag}.svg`}
                            className='size-5 rounded-sm'
                            alt=''
                            width={20}
                            height={20}
                          />
                          {
                            languages.find((lang) => lang.value === language)
                              ?.label
                          }
                        </div>
                      </Select.Value>
                    </Select.Trigger>
                    <Select.Content>
                      {languages.map((lang) => (
                        <Select.Item key={lang.value} value={lang.value}>
                          <Select.ItemIcon
                            style={{
                              backgroundImage: `url(https://alignui.com/flags/${lang.flag}.svg)`,
                            }}
                            className='size-5 rounded-sm'
                          />
                          {lang.label}
                        </Select.Item>
                      ))}
                    </Select.Content>
                  </Select.Root>
                </div>

                <div className='flex flex-col gap-1'>
                  <Label.Root
                    htmlFor='timezone'
                    className='text-label-sm text-text-strong-950'
                  >
                    Timezone <Label.Asterisk />
                    <IconInfoCustomFill className='text-text-disabled-300 size-5' />
                  </Label.Root>
                  <Select.Root value={timezone} onValueChange={setTimezone}>
                    <Select.Trigger className='w-full'>
                      <Select.Value>
                        {timezones.find((tz) => tz.value === timezone)?.label}
                      </Select.Value>
                    </Select.Trigger>
                    <Select.Content>
                      {timezones.map((tz) => (
                        <Select.Item key={tz.value} value={tz.value}>
                          {tz.label}
                        </Select.Item>
                      ))}
                    </Select.Content>
                  </Select.Root>
                </div>

                <div className='flex flex-col gap-1'>
                  <Label.Root
                    htmlFor='timeFormat'
                    className='text-label-sm text-text-strong-950'
                  >
                    Time Format{' '}
                    <span className='text-paragraph-sm text-text-sub-600'>
                      (Optional)
                    </span>
                    <IconInfoCustomFill className='text-text-disabled-300 size-5' />
                  </Label.Root>
                  <Select.Root value={timeFormat} onValueChange={setTimeFormat}>
                    <Select.Trigger className='w-full'>
                      <Select.Value>
                        {
                          timeFormats.find((tf) => tf.value === timeFormat)
                            ?.label
                        }
                      </Select.Value>
                    </Select.Trigger>
                    <Select.Content>
                      {timeFormats.map((tf) => (
                        <Select.Item key={tf.value} value={tf.value}>
                          {tf.label}
                        </Select.Item>
                      ))}
                    </Select.Content>
                  </Select.Root>
                </div>

                <div className='flex flex-col gap-1'>
                  <Label.Root
                    htmlFor='dateFormat'
                    className='text-label-sm text-text-strong-950'
                  >
                    Date Format{' '}
                    <span className='text-paragraph-sm text-text-sub-600'>
                      (Optional)
                    </span>
                    <IconInfoCustomFill className='text-text-disabled-300 size-5' />
                  </Label.Root>
                  <Select.Root value={dateFormat} onValueChange={setDateFormat}>
                    <Select.Trigger className='w-full'>
                      <Select.Value>
                        {
                          dateFormats.find((df) => df.value === dateFormat)
                            ?.label
                        }
                      </Select.Value>
                    </Select.Trigger>
                    <Select.Content>
                      {dateFormats.map((df) => (
                        <Select.Item key={df.value} value={df.value}>
                          {df.label}
                        </Select.Item>
                      ))}
                    </Select.Content>
                  </Select.Root>
                </div>
              </div>

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

              <div className='space-y-4 p-5'>
                <Radio.Group
                  value={systemMode === 'system' ? 'system' : lightMode}
                  onValueChange={(value) => {
                    if (value === 'system') {
                      setSystemMode('system');
                      setLightMode('system');
                    } else {
                      setLightMode(value);
                      setSystemMode('off');
                    }
                  }}
                  className='space-y-4'
                >
                  <div className='group/radio flex items-start gap-2'>
                    <Radio.Item value='light' id='lightMode' />
                    <div className='flex flex-col gap-1'>
                      <Label.Root htmlFor='lightMode'>
                        <span className='text-label-sm text-text-strong-950'>
                          Light Mode{' '}
                          <span className='text-paragraph-xs text-text-sub-600'>
                            (Default)
                          </span>
                        </span>
                      </Label.Root>
                      <span className='text-paragraph-xs text-text-sub-600'>
                        Pick a clean and classic light theme.
                      </span>
                    </div>
                  </div>

                  <div className='group/radio flex items-start gap-2'>
                    <Radio.Item value='dark' id='darkMode' />
                    <div className='flex flex-col gap-1'>
                      <Label.Root htmlFor='darkMode'>
                        <span className='text-label-sm text-text-strong-950'>
                          Dark Mode
                        </span>
                      </Label.Root>
                      <span className='text-paragraph-xs text-text-sub-600'>
                        Select a sleek and modern dark theme.
                      </span>
                    </div>
                  </div>

                  <div className='group/radio flex items-start gap-2'>
                    <Radio.Item value='system' id='systemMode' />
                    <div className='flex flex-col gap-1'>
                      <Label.Root htmlFor='systemMode'>
                        <span className='text-label-sm text-text-strong-950'>
                          System Mode
                        </span>
                      </Label.Root>
                      <span className='text-paragraph-xs text-text-sub-600'>
                        Adapts to your device&apos;s theme.
                      </span>
                    </div>
                  </div>
                </Radio.Group>
              </div>
            </Drawer.Body>

            <Drawer.Footer className='border-stroke-soft-200 flex justify-between gap-3 border-t'>
              <Button.Root
                variant='neutral'
                mode='stroke'
                size='medium'
                className='flex-1'
                onClick={() => setOpen(false)}
              >
                Cancel
              </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>
  );
}