'use client';

import { AlignInfoFillIcon as IconInfoCustomFill } from '@/components/misc/alignui-icons';
import * as React from 'react';
import * as LabelPrimitives from '@radix-ui/react-label';
import { X } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as CompactButton from '@/components/ui/compact-button';
import * as Divider from '@/components/ui/divider';
import * as LinkButton from '@/components/ui/link-button';
import * as Radio from '@/components/ui/radio';
import * as Select from '@/components/ui/select';
import * as Textarea from '@/components/ui/textarea';

export default function InviteMemberRadio() {
  const [value, setValue] = React.useState('');

  return (
    <div className='rounded-20 bg-bg-white-0 shadow-custom-md w-full max-w-[464px]'>
      <div className='flex flex-col gap-1 px-5 py-4'>
        <div className='flex items-center justify-between gap-2'>
          <h3 className='text-label-md text-text-strong-950'>
            Invite team member
          </h3>
          <CompactButton.Root variant='ghost' size='large'>
            <CompactButton.Icon as={X} />
          </CompactButton.Root>
        </div>
        <div className='text-paragraph-sm text-text-sub-600'>
          Set member access and permissions.
        </div>
      </div>

      <div className='px-2 py-0.5'>
        <Divider.Root variant='line' />
      </div>

      <div className='flex flex-col gap-4 p-5'>
        <Radio.Group defaultValue='author' className='flex flex-col gap-4'>
          <LabelPrimitives.Root
            htmlFor='viewer'
            className='group/radio flex cursor-pointer items-start gap-3'
          >
            <Radio.Item id='viewer' value='viewer' />
            <div className='flex flex-col gap-1'>
              <span className='text-label-sm text-text-strong-950'>Viewer</span>
              <span className='text-paragraph-sm text-text-sub-600'>
                Can view and comment on projects.
              </span>
            </div>
          </LabelPrimitives.Root>

          <LabelPrimitives.Root
            htmlFor='author'
            className='group/radio flex cursor-pointer items-start gap-3'
          >
            <Radio.Item id='author' value='author' />
            <div className='flex flex-col gap-1'>
              <span className='text-label-sm text-text-strong-950'>Author</span>
              <span className='text-paragraph-sm text-text-sub-600'>
                Can edit project content and create new items.
              </span>
            </div>
          </LabelPrimitives.Root>

          <LabelPrimitives.Root
            htmlFor='manager'
            className='group/radio flex cursor-pointer items-start gap-3'
          >
            <Radio.Item id='manager' value='manager' />
            <div className='flex flex-col gap-1'>
              <span className='text-label-sm text-text-strong-950'>
                Manager
              </span>
              <span className='text-paragraph-sm text-text-sub-600'>
                Manage projects, teams and view all reports.
              </span>
            </div>
          </LabelPrimitives.Root>

          <LabelPrimitives.Root
            htmlFor='admin'
            className='group/radio flex cursor-pointer items-start gap-3'
          >
            <Radio.Item id='admin' value='admin' />
            <div className='flex flex-col gap-1'>
              <span className='text-label-sm text-text-strong-950'>Admin</span>
              <span className='text-paragraph-sm text-text-sub-600'>
                Full admin control with billing and security access.
              </span>
            </div>
          </LabelPrimitives.Root>
        </Radio.Group>
      </div>

      <div className='px-2 py-0.5'>
        <Divider.Root variant='line' />
      </div>

      <div className='flex flex-col gap-4 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'>
              Project access
            </span>
            <IconInfoCustomFill className='text-text-disabled-300 size-5' />
          </div>
          <Select.Root defaultValue='all'>
            <Select.Trigger>
              <Select.Value placeholder='Select project access' />
            </Select.Trigger>
            <Select.Content>
              <Select.Item value='all'>All active projects</Select.Item>
              <Select.Item value='selected'>Selected projects</Select.Item>
            </Select.Content>
          </Select.Root>
        </div>

        <div className='flex flex-col gap-1'>
          <div>
            <span className='text-label-sm text-text-strong-950'>
              Welcome message
            </span>{' '}
            <span className='text-paragraph-sm text-text-sub-600'>
              (Optional)
            </span>
          </div>
          <Textarea.Root
            placeholder='Add a personalized message to your invitation...'
            className='min-h-[54px] resize-none'
            value={value}
            onChange={(e) => setValue(e.target.value)}
          >
            <Textarea.CharCounter current={value.length} max={200} />
          </Textarea.Root>
        </div>
      </div>

      <div className='px-2 py-0.5'>
        <Divider.Root variant='line' />
      </div>

      <div className='flex items-center justify-between gap-3 px-6 py-4'>
        <div className='flex gap-3'>
          <LinkButton.Root>Cancel</LinkButton.Root>
        </div>
        <div className='flex gap-3'>
          <Button.Root variant='neutral' mode='stroke' size='small'>
            Save as draft
          </Button.Root>
          <Button.Root size='small' variant='neutral' className='rounded-10'>
            Send invitation
          </Button.Root>
        </div>
      </div>
    </div>
  );
}