'use client';

import { AlignInfoIcon as IconInfoCustom } from '@/components/misc/alignui-icons';
import React from 'react';
import { Plus } from 'lucide-react';
import { cn } from '@/utils/cn';

import { IconEmptyUser } from '@/components/ui/avatar-empty-icons';
import * as Avatar from '@/components/ui/avatar';
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';

const DividerVertical = ({ className }: { className?: string }) => {
  return (
    <div
      className={cn('text-stroke-soft-200 relative', className)}
      role='separator'
    >
      <div
        className='absolute left-0 h-full w-full'
        style={{
          background:
            'linear-gradient(180deg, currentColor 4px, transparent 4px) 50% 50% / 1px 8px repeat-y',
        }}
      />
    </div>
  );
};

const DividerHorizontal = ({ className }: { className?: string }) => {
  return (
    <div
      className={cn('text-stroke-soft-200 relative h-0 w-full', className)}
      role='separator'
    >
      <div
        className='absolute left-0 h-px w-full'
        style={{
          background:
            'linear-gradient(90deg, currentColor 4px, transparent 4px) 50% 50% / 8px 1px repeat no-repeat',
        }}
      />
    </div>
  );
};

export default function AddWriterModal() {
  const [open, setOpen] = React.useState(true);
  const fileInputRef = React.useRef<HTMLInputElement>(null);
  const [imageUrl, setImageUrl] = React.useState<string | null>(null);

  const handleUploadClick = () => {
    fileInputRef.current?.click();
  };

  return (
    <Modal.Root defaultOpen open={open} onOpenChange={setOpen}>
      <Modal.Trigger>
        <Button.Root variant='neutral' mode='stroke'>
          Add a writer
        </Button.Root>
      </Modal.Trigger>
      <Modal.Content className='shadow-custom-md max-w-[536px]'>
        <Modal.Header>
          <Modal.Title>
            <span className='text-label-md text-text-sub-600'>
              Add a writer
            </span>
          </Modal.Title>
        </Modal.Header>
        <div className='flex flex-col gap-6 p-5 md:flex-row'>
          <div className='flex flex-col items-center gap-4 py-4'>
            <Avatar.Root size='64'>
              <input
                type='file'
                ref={fileInputRef}
                className='hidden'
                accept='image/*'
                onChange={(e) => {
                  const file = e.target.files?.[0];
                  if (file) {
                    const url = URL.createObjectURL(file);
                    setImageUrl(url);
                  }
                }}
              />
              <Avatar.Image asChild className='text-text-soft-400'>
                <IconEmptyUser />
              </Avatar.Image>
              <Avatar.Indicator position='top'>
                <div className='bg-bg-white-0 flex size-[28px] items-center justify-center rounded-full p-[1.75px]'>
                  <div className='border-bg-white-0 flex size-full items-center justify-center rounded-full border bg-neutral-500'>
                    <Plus className='text-text-white-0' />
                  </div>
                </div>
              </Avatar.Indicator>
            </Avatar.Root>
            <div className='flex w-[148px] flex-col items-center justify-center gap-1'>
              <span className='text-label-sm text-text-strong-950'>
                Upload image
              </span>
              <span className='text-paragraph-xs text-text-sub-600'>
                Max file size: 1MB
              </span>
            </div>
            <Button.Root
              variant='neutral'
              mode='stroke'
              size='xsmall'
              onClick={handleUploadClick}
            >
              Add Image
            </Button.Root>
          </div>

          <div className='block w-full md:hidden'>
            <DividerHorizontal className='w-full' />
          </div>
          <div className='hidden md:block'>
            <DividerVertical className='h-auto min-h-[200px] w-px' />
          </div>

          <div className='flex-1'>
            <div className='flex flex-col gap-3'>
              <div className='flex flex-col gap-1'>
                <Label.Root htmlFor='email'>
                  Author name
                  <Label.Asterisk />
                </Label.Root>
                <Input.Root>
                  <Input.Wrapper>
                    <Input.Input placeholder='Enter author name' required />
                  </Input.Wrapper>
                </Input.Root>
              </div>

              <div className='flex flex-col gap-6'>
                <div className='flex flex-col gap-1'>
                  <Label.Root htmlFor='email'>
                    Title
                    <IconInfoCustom className='text-text-disabled-300 size-5' />
                  </Label.Root>
                  <Input.Root>
                    <Input.Wrapper>
                      <Input.Input placeholder='Marketing Manager' required />
                    </Input.Wrapper>
                  </Input.Root>
                </div>

                <div className='flex justify-end gap-3'>
                  <Button.Root
                    variant='neutral'
                    mode='stroke'
                    size='small'
                    onClick={() => setOpen(false)}
                  >
                    Cancel
                  </Button.Root>
                  <Button.Root variant='neutral' mode='filled' size='small'>
                    Save Changes
                  </Button.Root>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Modal.Content>
    </Modal.Root>
  );
}