'use client';

import { AlignInfoIcon as IconInfoCustom } from '@/components/misc/alignui-icons';
import * as React from 'react';
import { ChevronDown, Globe, Share2, UserPlus } from 'lucide-react';

import * as Avatar from '@/components/ui/avatar';
import * as Button from '@/components/ui/button';
import * as Input from '@/components/ui/input';
import * as Modal from '@/components/ui/modal';
import * as Select from '@/components/ui/select';
type InviteMemberFormData = {
  email: string;
  accessLevel: 'can_view' | 'can_edit';
};

const accessLevelData = [
  {
    value: 'can_view',
    label: 'can view',
  },
  {
    value: 'can_edit',
    label: 'can edit',
  },
];

function SelectInline({
  defaultValue = 'can_view',
}: {
  defaultValue?: 'can_view' | 'can_edit';
}) {
  return (
    <Select.Root variant='inline' defaultValue={defaultValue}>
      <Select.Trigger>
        <Select.TriggerIcon as={Globe} />
        <Select.Value />
      </Select.Trigger>
      <Select.Content>
        {accessLevelData.map((item) => (
          <Select.Item key={item.value} value={item.value}>
            {item.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  );
}

export default function ProjectInviteModal() {
  const [open, setOpen] = React.useState(true);
  const [formData, setFormData] = React.useState<InviteMemberFormData>({
    email: '',
    accessLevel: 'can_view',
  });

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

  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-[440px]'>
        <Modal.Header
          title='Invite to Project'
          description='Collaborate with members on this project.'
          icon={UserPlus}
        />

        <Modal.Body className='flex flex-col gap-6'>
          <div className='flex flex-col gap-6'>
            <div className='flex flex-col gap-2'>
              <div className='flex items-center gap-1'>
                <span className='text-label-sm text-text-strong-950'>
                  Invite Members
                </span>
                <IconInfoCustom className='text-text-soft-400 size-5 shrink-0' />
              </div>
              <div className='flex gap-2'>
                <Input.Root className='flex-1' size='small'>
                  <Input.Wrapper>
                    <Input.Input
                      name='email'
                      type='email'
                      placeholder='Email address...'
                      value={formData.email}
                      onChange={handleInputChange}
                    />
                    <SelectInline />
                  </Input.Wrapper>
                </Input.Root>
                <Button.Root variant='neutral' mode='stroke' size='small'>
                  Invite
                </Button.Root>
              </div>
            </div>

            <div className='flex flex-col gap-2'>
              <div className='flex items-center gap-1'>
                <span className='text-label-sm text-text-strong-950'>
                  Members with access
                </span>
                <IconInfoCustom className='text-text-soft-400 size-5 shrink-0' />
              </div>
              <div className='flex flex-col gap-4'>
                <div className='flex items-center gap-3'>
                  <Avatar.Root size='40' color='yellow'>
                    <Avatar.Image src='https://alignui.com/images/avatar/illustration/juma.png' />
                  </Avatar.Root>
                  <div className='min-w-0 flex-1'>
                    <div className='text-label-sm text-text-strong-950 overflow-hidden text-ellipsis whitespace-nowrap'>
                      Juma Omondi
                    </div>
                    <div className='text-paragraph-xs text-text-sub-600 overflow-hidden text-ellipsis whitespace-nowrap'>
                      juma@alignui.com
                    </div>
                  </div>
                  <SelectInline defaultValue='can_edit' />
                </div>

                <div className='flex items-center gap-3'>
                  <Avatar.Root size='40' color='blue'>
                    <Avatar.Image src='https://alignui.com/images/avatar/illustration/arthur.png' />
                  </Avatar.Root>
                  <div className='min-w-0 flex-1'>
                    <div className='text-label-sm text-text-strong-950 overflow-hidden text-ellipsis whitespace-nowrap'>
                      Arthur Taylor
                    </div>
                    <div className='text-paragraph-xs text-text-sub-600 overflow-hidden text-ellipsis whitespace-nowrap'>
                      arthur@alignui.com
                    </div>
                  </div>
                  <SelectInline />
                </div>

                <div className='flex items-center gap-3'>
                  <Avatar.Root size='40' color='red'>
                    <Avatar.Image src='https://alignui.com/images/avatar/illustration/laura.png' />
                  </Avatar.Root>
                  <div className='min-w-0 flex-1'>
                    <div className='text-label-sm text-text-strong-950 overflow-hidden text-ellipsis whitespace-nowrap'>
                      Laura Perez
                    </div>
                    <div className='text-paragraph-xs text-text-sub-600 overflow-hidden text-ellipsis whitespace-nowrap'>
                      laura@alignui.com
                    </div>
                  </div>
                  <SelectInline />
                </div>
              </div>
            </div>

            <div className='flex flex-col gap-4'>
              <div className='flex items-center gap-1'>
                <span className='text-label-sm text-text-strong-950'>
                  Members with access
                </span>
                <IconInfoCustom className='text-text-soft-400 size-5 shrink-0' />
              </div>
              <div className='flex items-center justify-between'>
                <div className='flex items-center gap-3'>
                  <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'>
                    <Share2 className='text-text-sub-600 size-5' />
                  </div>
                  <div className='flex flex-col gap-1'>
                    <div className='flex items-center gap-1'>
                      <span className='text-label-sm text-text-strong-950'>
                        Members with link
                      </span>
                      <ChevronDown className='text-text-sub-600 size-5' />
                    </div>
                    <span className='text-paragraph-xs text-text-sub-600'>
                      Members who have the link have access to this project.
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Modal.Body>

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