'use client';

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

import * as Alert from '@/components/ui/alert';
import * as Button from '@/components/ui/button';
import * as CompactButton from '@/components/ui/compact-button';
import * as Divider from '@/components/ui/divider';
import * as Hint from '@/components/ui/hint';
import * as Radio from '@/components/ui/radio';
import * as Select from '@/components/ui/select';
const LANGUAGES = [
  {
    value: 'en',
    label: 'English (US)',
    flag: 'https://alignui.com/flags/US.svg',
  },
  {
    value: 'de',
    label: 'German',
    flag: 'https://alignui.com/flags/DE.svg',
  },
  {
    value: 'fr',
    label: 'French',
    flag: 'https://alignui.com/flags/FR.svg',
  },
];

const LOCATIONS = [
  {
    value: 'de',
    label: 'Germany',
    flag: 'https://alignui.com/flags/DE.svg',
  },
  {
    value: 'fr',
    label: 'France',
    flag: 'https://alignui.com/flags/FR.svg',
  },
  {
    value: 'uk',
    label: 'United Kingdom',
    flag: 'https://alignui.com/flags/GB.svg',
  },
];

export default function PreferencesRadio() {
  const [selectedPreference, setSelectedPreference] = React.useState('weekly');
  const [selectedLanguage, setSelectedLanguage] = React.useState('en');
  const [selectedLocation, setSelectedLocation] = React.useState('de');

  const selectedLangInfo = LANGUAGES.find(
    (lang) => lang.value === selectedLanguage,
  );
  const selectedLocInfo = LOCATIONS.find(
    (loc) => loc.value === selectedLocation,
  );

  return (
    <div className='rounded-20 bg-bg-white-0 shadow-custom-md w-full max-w-[440px]'>
      <div className='border-stroke-soft-200 flex items-start justify-between gap-2 border-b py-4 pr-4 pl-5'>
        <div className='flex items-center gap-3.5'>
          <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 flex-col gap-1'>
            <h3 className='text-label-sm text-text-strong-950'>
              Edit Your Preferences
            </h3>
            <div className='text-paragraph-xs text-text-sub-600'>
              Customize your preferences to your experience.
            </div>
          </div>
        </div>
        <CompactButton.Root variant='ghost' size='large'>
          <CompactButton.Icon as={X} />
        </CompactButton.Root>
      </div>

      <div className='flex flex-col gap-3 p-5'>
        <div className='flex flex-col gap-1'>
          <div className='flex items-center gap-1'>
            <span className='text-label-sm text-text-strong-950'>Language</span>
            <span className='text-paragraph-xs text-primary-base'>*</span>
          </div>
          <Select.Root
            value={selectedLanguage}
            onValueChange={setSelectedLanguage}
          >
            <Select.Trigger>
              <Select.Value>
                <div className='flex items-center gap-2'>
                  <img
                    src={selectedLangInfo?.flag}
                    alt={`${selectedLangInfo?.label} flag`}
                    className='h-4 w-4 rounded-full object-cover'
                  />
                  <span className='text-paragraph-sm text-text-strong-950'>
                    {selectedLangInfo?.label}
                  </span>
                </div>
              </Select.Value>
            </Select.Trigger>
            <Select.Content>
              {LANGUAGES.map((lang) => (
                <Select.Item key={lang.value} value={lang.value}>
                  <div className='flex items-center gap-2'>
                    <img
                      src={lang.flag}
                      alt={`${lang.label} flag`}
                      className='size-5 rounded-full object-cover'
                    />
                    {lang.label}
                  </div>
                </Select.Item>
              ))}
            </Select.Content>
          </Select.Root>
        </div>

        <div className='flex flex-col gap-1'>
          <div className='flex items-center gap-px'>
            <span className='text-label-sm text-text-strong-950'>Location</span>
            <IconInfoCustomFill className='text-text-disabled-300 size-5' />
          </div>
          <Select.Root
            value={selectedLocation}
            onValueChange={setSelectedLocation}
          >
            <Select.Trigger>
              <Select.Value>
                <div className='flex items-center gap-2'>
                  <img
                    src={selectedLocInfo?.flag}
                    alt={`${selectedLocInfo?.label} flag`}
                    className='size-5 rounded-full object-cover'
                  />
                  <span className='text-paragraph-sm text-text-strong-950'>
                    {selectedLocInfo?.label}
                  </span>
                </div>
              </Select.Value>
            </Select.Trigger>
            <Select.Content>
              {LOCATIONS.map((loc) => (
                <Select.Item key={loc.value} value={loc.value}>
                  <div className='flex items-center gap-2'>
                    <img
                      src={loc.flag}
                      alt={`${loc.label} flag`}
                      className='h-4 w-4 rounded-full object-cover'
                    />
                    {loc.label}
                  </div>
                </Select.Item>
              ))}
            </Select.Content>
          </Select.Root>
          <Hint.Root>
            <Hint.Icon as={Info} />
            Select your preferred location for personalized recommendations.
          </Hint.Root>
        </div>
      </div>

      <Divider.Root variant='line' />

      <div className='flex flex-col gap-3 p-5'>
        <div className='flex items-center gap-px'>
          <span className='text-label-sm text-text-strong-950'>
            Email Preferences
          </span>
          <IconInfoCustomFill className='text-text-disabled-300 size-5' />
        </div>
        <Radio.Group
          value={selectedPreference}
          onValueChange={setSelectedPreference}
          className='flex flex-col gap-3'
        >
          <div
            onClick={() => setSelectedPreference('weekly')}
            className={`cursor-pointer rounded-xl p-4 ring-1 transition-all duration-200 ease-in-out ${
              selectedPreference === 'weekly'
                ? 'bg-primary-lighter ring-primary-base'
                : 'hover:bg-bg-soft-50 ring-stroke-soft-200'
            }`}
          >
            <div className='flex items-start justify-between gap-3.5'>
              <div className='flex flex-col gap-1'>
                <span className='text-label-sm text-text-strong-950'>
                  Receive Weekly Update
                </span>
                <span className='text-paragraph-xs text-text-sub-600'>
                  Stay informed with weekly updates and exclusive content.
                </span>
              </div>
              <Radio.Item
                id='weekly'
                value='weekly'
                className='cursor-pointer'
              />
            </div>
          </div>

          <div
            onClick={() => setSelectedPreference('marketing')}
            className={`cursor-pointer rounded-xl p-4 ring-1 transition-all duration-200 ease-in-out ${
              selectedPreference === 'marketing'
                ? 'bg-primary-lighter ring-primary-base'
                : 'hover:bg-bg-soft-50 ring-stroke-soft-200'
            }`}
          >
            <div className='flex items-start justify-between gap-3.5'>
              <div className='flex flex-col gap-1'>
                <span className='text-label-sm text-text-strong-950'>
                  Opt-out from Marketing Emails
                </span>
                <span className='text-paragraph-xs text-text-sub-600'>
                  Choose not to receive marketing emails from us.
                </span>
              </div>
              <Radio.Item
                id='marketing'
                value='marketing'
                className='cursor-pointer'
              />
            </div>
          </div>
        </Radio.Group>
        <Alert.Root
          size='xsmall'
          variant='lighter'
          status='information'
          wrapperClassName='flex items-center'
        >
          <Alert.Icon as={Info} />
          <span className='text-paragraph-xs text-text-strong-950'>
            You&apos;ll receive a weekly update with the email you signed up.
          </span>
        </Alert.Root>
      </div>

      <div className='border-stroke-soft-200 flex items-center justify-between gap-3 border-t px-5 py-4'>
        <Button.Root
          variant='neutral'
          mode='stroke'
          size='small'
          className='flex-1'
        >
          Cancel
        </Button.Root>
        <Button.Root size='small' variant='primary' className='flex-1'>
          Save Changes
        </Button.Root>
      </div>
    </div>
  );
}