'use client';

import { AlignInfoFillIcon as IconInfoCustomFill } from '@/components/misc/alignui-icons';
import * as React from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import * as LabelPrimitives from '@radix-ui/react-label';
import { SlidersHorizontal } from 'lucide-react';
import { useFieldArray, useForm } from 'react-hook-form';
import * as z from 'zod';

import * as Button from '@/components/ui/button';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import * as Modal from '@/components/ui/modal';
import * as Switch from '@/components/ui/switch';
import * as Tag from '@/components/ui/tag';
import * as Tooltip from '@/components/ui/tooltip';
const formSchema = z.object({
  sections: z.array(
    z.object({
      id: z.string(),
      label: z.string(),
      tags: z.array(z.string()),
    }),
  ),
  messagingEnabled: z.boolean(),
  matchingScoreEnabled: z.boolean(),
});

type FormData = z.infer<typeof formSchema>;

export default function RecruitmentCustomizationModal() {
  const [open, setOpen] = React.useState(true);
  const [tempInputs, setTempInputs] = React.useState<Record<string, string>>(
    {},
  );

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      sections: [
        {
          id: 'experience',
          label: 'Experience Levels',
          tags: ['Entry Level', 'Internship', 'Mid-level Senior'],
        },
        {
          id: 'sources',
          label: 'Candidate Sources',
          tags: ['LinkedIn', 'Indeed', 'Referral'],
        },
      ],
      messagingEnabled: true,
      matchingScoreEnabled: false,
    },
  });

  const { fields } = useFieldArray({
    name: 'sections',
    control: form.control,
  });

  const handleAddTag = (
    sectionIndex: number,
    e: React.KeyboardEvent<HTMLInputElement>,
  ) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      const newTag = tempInputs[sectionIndex]?.trim();

      if (newTag) {
        const currentTags = form.getValues(`sections.${sectionIndex}.tags`);

        const isDuplicate = currentTags.some(
          (tag) => tag.toLowerCase() === newTag.toLowerCase(),
        );

        if (!isDuplicate) {
          form.setValue(`sections.${sectionIndex}.tags`, [
            ...currentTags,
            newTag,
          ]);
          setTempInputs((prev) => ({ ...prev, [sectionIndex]: '' }));
        }
      }
    }
  };

  const handleRemoveTag = (sectionIndex: number, tagIndex: number) => {
    const currentTags = form.getValues(`sections.${sectionIndex}.tags`);
    form.setValue(
      `sections.${sectionIndex}.tags`,
      currentTags.filter((_, index) => index !== tagIndex),
    );
  };

  const onSubmit = (data: FormData) => {
    console.log(data);
    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>
        <Modal.Header
          icon={SlidersHorizontal}
          title='Customization'
          description='Customise your recruitment module.'
        />
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <Modal.Body className='flex flex-col gap-5'>
            {fields.map((section, sectionIndex) => (
              <div key={section.id} className='flex flex-col items-start gap-1'>
                <Label.Root htmlFor={section.id}>
                  {section.label}
                  <Label.Sub>(max. 4)</Label.Sub>
                  <Tooltip.Provider>
                    <Tooltip.Root>
                      <Tooltip.Trigger
                        type='button'
                        className='focus:outline-none'
                      >
                        <IconInfoCustomFill className='text-text-disabled-300 size-5' />
                      </Tooltip.Trigger>
                      <Tooltip.Content size='small' className='max-w-72'>
                        Use relevant keywords, separated by commas. Tags should
                        be concise and descriptive.
                      </Tooltip.Content>
                    </Tooltip.Root>
                  </Tooltip.Provider>
                </Label.Root>

                <Input.Root>
                  <Input.Wrapper>
                    <Input.Input
                      id={section.id}
                      autoFocus={sectionIndex === 0}
                      placeholder='Add tags...'
                      value={tempInputs[sectionIndex] || ''}
                      onChange={(e) =>
                        setTempInputs((prev) => ({
                          ...prev,
                          [sectionIndex]: e.target.value,
                        }))
                      }
                      onKeyDown={(e) => handleAddTag(sectionIndex, e)}
                    />
                  </Input.Wrapper>
                </Input.Root>

                <div className='mt-2 flex flex-wrap gap-2'>
                  {form
                    .watch(`sections.${sectionIndex}.tags`)
                    .map((tag, tagIndex) => (
                      <Tag.Root key={tag}>
                        {tag}
                        <Tag.DismissButton
                          onClick={() =>
                            handleRemoveTag(sectionIndex, tagIndex)
                          }
                        />
                      </Tag.Root>
                    ))}
                </div>
              </div>
            ))}

            <div className='flex items-center gap-2'>
              <Switch.Root
                id='s1'
                checked={form.watch('messagingEnabled')}
                onCheckedChange={(checked) =>
                  form.setValue('messagingEnabled', checked)
                }
              />
              <LabelPrimitives.Root
                htmlFor='s1'
                className='text-paragraph-sm text-text-strong-950 cursor-pointer'
              >
                Messaging Settings
              </LabelPrimitives.Root>
            </div>

            <div className='flex items-center gap-2'>
              <Switch.Root
                id='s2'
                checked={form.watch('matchingScoreEnabled')}
                onCheckedChange={(checked) =>
                  form.setValue('matchingScoreEnabled', checked)
                }
              />
              <LabelPrimitives.Root
                htmlFor='s2'
                className='text-paragraph-sm text-text-strong-950 cursor-pointer'
              >
                Matching Score
              </LabelPrimitives.Root>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Modal.Close asChild>
              <Button.Root
                variant='neutral'
                mode='stroke'
                size='small'
                className='w-full'
              >
                Cancel
              </Button.Root>
            </Modal.Close>
            <Button.Root type='submit' size='small' className='w-full'>
              Save Changes
            </Button.Root>
          </Modal.Footer>
        </form>
      </Modal.Content>
    </Modal.Root>
  );
}