import { ChangeEvent, DragEvent, FormEvent, useEffect, useState } from 'react'
import { useQueryClient } from 'react-query'
import { FaFileUpload } from 'react-icons/fa'
import { Button, FileInput, Label, Modal } from 'flowbite-react'

import { useUserStore } from '@/src/store/userStore'
import { useUIStore } from '@/src/store/uiStore'
import { useUploadYearReportCard } from '@/src/hooks/user/studentStudyYears'

interface Props {
  show: boolean
  onClose: () => void
  studyYearId: string
}

export default function ModalUploadGradeReport({
  show,
  onClose,
  studyYearId,
}: Props) {
  const [fileName, setFileName] = useState('')
  const [file, setFile] = useState<File | null>(null)
  const [error, setError] = useState('')
  const { mutate, isLoading } = useUploadYearReportCard()
  const { setLoading } = useUIStore()
  const { studentSelected } = useUserStore()
  const queryClient = useQueryClient()

  useEffect(() => {
    setError('')
    setFileName('')
    setFile(null)
  }, [show])

  useEffect(() => {
    setLoading(isLoading)
  }, [isLoading])

  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
    event.preventDefault()

    const files = event.target.files
    if (files && files.length > 0) {
      const file = files[0]
      if (file.type === 'application/pdf') {
        setFile(file)
        setError('')
        setFileName(file.name)
      } else {
        setFile(null)
        setFileName('')
        setError('El archivo debe ser PDF')
      }
    }
  }

  const handleDrop = (event: DragEvent<HTMLLabelElement>) => {
    event.preventDefault()

    const files = event.dataTransfer.files
    if (files && files.length > 0) {
      const file = files[0]
      if (file.type === 'application/pdf') {
        setFile(file)
        setError('')
        setFileName(file.name)
      } else {
        setFile(null)
        setFileName('')
        setError('El archivo debe ser PDF')
      }
    }
  }

  const handleDragOver = (event: DragEvent<HTMLLabelElement>) => {
    event.preventDefault()
  }

  const handleUploadFile = (event: FormEvent<HTMLButtonElement>) => {
    event.preventDefault()

    if (!file) {
      setError('No hay un archivo cargado')
      return
    }

    mutate(
      { file, studyYearId },
      {
        onSuccess: () => {
          queryClient.invalidateQueries([
            'student-study-years',
            studentSelected?.id,
          ])
          onClose()
        },

        onError: () => {
          onClose()
        },
      },
    )
  }

  return (
    <Modal
      show={show}
      onClose={onClose}
      size="md"
      position="center"
      popup
      className="flex items-center justify-center min-h-screen">
      <Modal.Header />
      <Modal.Body>
        <div className="space-y-6">
          <h3 className="text-xl font-medium text-gray-900 dark:text-white">
            Subir reporte de notas
          </h3>

          <div className="flex flex-col items-center">
            <div className="flex w-full items-center justify-center">
              <Label
                htmlFor="dropzone-file"
                className="flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
                onDrop={handleDrop}
                onDragOver={handleDragOver}>
                <div className="flex flex-col items-center justify-center pb-6 pt-5">
                  <svg
                    className="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 20 16">
                    <path
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
                    />
                  </svg>
                  <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                    <span className="font-semibold">
                      Haga click para cargar un archivo
                    </span>{' '}
                    o arrastre y suelte
                  </p>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    PDF (Máx. 2MB)
                  </p>
                </div>
                <FileInput
                  id="dropzone-file"
                  className="hidden"
                  onChange={handleFileChange}
                />
              </Label>
            </div>

            {fileName && (
              <p className="mt-2 text-sm text-gray-500">
                Archivo seleccionado: {fileName}
              </p>
            )}

            {error && <p className="mt-2 text-sm text-error">{error}</p>}
          </div>

          <div className="w-full flex justify-center">
            <Button
              color="base"
              type="submit"
              className="inline-flex items-center space-x-1"
              onClick={handleUploadFile}>
              <FaFileUpload className="mr-2 h-5 w-5" />
              <span>Subir archivo</span>
            </Button>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  )
}