'use client';

import { AlignInfoFillIcon as IconInfoCustomFill } from '@/components/misc/alignui-icons';
import React from 'react';
import {
  CheckCircle2,
  X,
  Trash2,
  Link2,
  Loader2,
  UploadCloud,
} 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 FileFormatIcon from '@/components/ui/file-format-icon';
import * as FileUpload from '@/components/ui/file-upload';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import * as Modal from '@/components/ui/modal';
import * as ProgressBar from '@/components/ui/progress-bar';

export default function FileUploadDialog01() {
  const [open, setOpen] = React.useState(true);

  return (
    <Modal.Root defaultOpen open={open} onOpenChange={setOpen}>
      <Modal.Trigger asChild>
        <Button.Root variant='neutral' mode='stroke'>
          Upload Files
        </Button.Root>
      </Modal.Trigger>
      <Modal.Content className='shadow-custom-md max-w-[440px]'>
        <Modal.Header
          icon={UploadCloud}
          title='Upload files'
          description='Select and upload the files of your choice'
        />
        <Modal.Body>
          <div className='space-y-4'>
            <FileUpload.Root>
              <input multiple type='file' tabIndex={-1} className='hidden' />
              <FileUpload.Icon as={UploadCloud} />

              <div className='space-y-1.5'>
                <div className='text-label-sm text-text-strong-950'>
                  Choose a file or drag & drop it here
                </div>
                <div className='text-paragraph-xs text-text-sub-600'>
                  JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
                </div>
              </div>
              <FileUpload.Button>Browse File</FileUpload.Button>
            </FileUpload.Root>

            <div className='space-y-4'>
              {/* Uploading File */}
              <div className='border-stroke-soft-200 flex w-full flex-col gap-4 rounded-2xl border p-4 pl-3.5'>
                <div className='flex gap-3'>
                  <FileFormatIcon.Root format='PDF' color='red' />
                  <div className='flex-1 space-y-1'>
                    <div className='text-label-sm text-text-strong-950'>
                      my-cv.pdf
                    </div>
                    <div className='flex items-center gap-1'>
                      <span className='text-paragraph-xs text-text-sub-600'>
                        0 KB of 120 KB
                      </span>
                      <span className='text-paragraph-xs text-text-sub-600'>
                        ∙
                      </span>
                      <Loader2 className='text-primary-base size-4 shrink-0 animate-spin' />
                      <span className='text-paragraph-xs text-text-strong-950'>
                        Uploading...
                      </span>
                    </div>
                  </div>
                  <CompactButton.Root
                    variant='ghost'
                    size='medium'
                    tabIndex={-1}
                  >
                    <CompactButton.Icon as={X} />
                  </CompactButton.Root>
                </div>
                <ProgressBar.Root value={40} />
              </div>

              {/* Completed File */}
              <div className='border-stroke-soft-200 flex items-start gap-3 rounded-2xl border p-4 pl-3.5'>
                <FileFormatIcon.Root format='PDF' color='red' />
                <div className='flex-1 space-y-1'>
                  <div className='text-label-sm text-text-strong-950'>
                    google-certificate.pdf
                  </div>
                  <div className='flex items-center gap-1'>
                    <span className='text-paragraph-xs text-text-sub-600'>
                      94 KB of 94 KB
                    </span>
                    <span className='text-paragraph-xs text-text-sub-600'>
                      ∙
                    </span>
                    <CheckCircle2 className='text-success-base size-4 shrink-0' />
                    <span className='text-paragraph-xs text-text-strong-950'>
                      Completed
                    </span>
                  </div>
                </div>
                <CompactButton.Root variant='ghost' size='medium' tabIndex={-1}>
                  <CompactButton.Icon as={Trash2} />
                </CompactButton.Root>
              </div>
            </div>
          </div>
          <Divider.Root variant='line-text' className='my-6'>
            OR
          </Divider.Root>
          <div className='flex flex-col gap-1'>
            <Label.Root className='text-label-sm text-text-strong-950'>
              Import from URL Link
              <IconInfoCustomFill className='text-text-disabled-300 size-5' />
            </Label.Root>

            <Input.Root className='w-full'>
              <Input.Wrapper>
                <Input.Icon as={Link2} />
                <Input.Input placeholder='Paste file URL' />
              </Input.Wrapper>
            </Input.Root>
          </div>
        </Modal.Body>
      </Modal.Content>
    </Modal.Root>
  );
}