'use client'

import { useEffect, useRef, useState } from 'react'
import TitleCard from "@/components/TitleCard/TitleCard"
import Button from "@/components/ui/Button"
import { Tabs } from "@/components/ui/Tab"
import Modal from "@/components/ui/Modal"
import { Toast } from '@/components/ui/Toast'
import { useDocumentStore } from '@/zustand/documentManagement/useDocumentStore'
import PageLoader from '@/components/PageLoader/PageLoader'
import { DocumentContent } from '@/types/staticContent/document.content.type'
import { useAuthStore } from '@/zustand/auth/useAuthStore'
import { getClientDictionary } from '@/utils/getClientDictionary'

export default function DocumentManagementPage() {
  const { documents, isLoading, isUploading, listDocuments, uploadDocument, deleteDocument } = useDocumentStore()
  const { language } = useAuthStore()
  const DOCUMENTS = getClientDictionary(language, 'documents') as DocumentContent;

  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [dragActive, setDragActive] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

  // Delete modal state
  const [showDeleteModal, setShowDeleteModal] = useState(false)
  const [docToDelete, setDocToDelete] = useState<{ id: string; name?: string } | null>(null)

  // Track active document type based on tab
  const [activeType, setActiveType] = useState<'regulatory' | 'company_policy'>('regulatory')

  // Fetch documents when active type changes
  useEffect(() => {
    listDocuments(
      { params: { document_type: activeType } },
      undefined,
      false
    )
  }, [activeType, listDocuments])

  // Documents visible in current tab
  const currentDocs = documents.filter(doc => doc.document_type === activeType)

  // Validate if file is PDF
  const validatePdfFile = (file: File): boolean => {
    if (file.type !== 'application/pdf') {
      Toast('error', `${DOCUMENTS.UPLOADED_DOCUMENTS.PDF_ALLOWED}`)
      // Clear file input
      if (fileInputRef.current) {
        fileInputRef.current.value = ''
      }
      return false
    }
    return true
  }

  const handleDrag = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (e.type === 'dragenter' || e.type === 'dragover') {
      setDragActive(true)
    } else if (e.type === 'dragleave') {
      setDragActive(false)
    }
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setDragActive(false)
    if (e.dataTransfer.files?.[0]) {
      const file = e.dataTransfer.files[0]
      if (validatePdfFile(file)) {
        // setSelectedFile(file)
        handleUpload(file)
      }
    }
  }

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files?.[0]) {
      const file = e.target.files[0]
      if (validatePdfFile(file)) {
        // setSelectedFile(file)
        handleUpload(file)
      }
    }
  }

  const clearSelectedFile = () => {
    setSelectedFile(null)
    // Clear file input
    if (fileInputRef.current) {
      fileInputRef.current.value = ''
    }
  }

  const handleUpload = async (file: File) => {
    if (!file) {
      Toast('error', `${DOCUMENTS.UPLOADED_DOCUMENTS.SELECT_DOCUMENT}`)
      return
    }

    const formData = new FormData()
    formData.append('file', file)
    formData.append('document_type', activeType)

    uploadDocument(formData, (success) => {
      if (success) {
        setSelectedFile(null)
        // Clear file input after successful upload
        if (fileInputRef.current) {
          fileInputRef.current.value = ''
        }
        // Refresh current tab's list
        listDocuments({ params: { document_type: activeType } })
      }
    }, true)
  }

  const openDeleteModal = (doc: { id: string; name?: string }) => {
    setDocToDelete(doc)
    setShowDeleteModal(true)
  }

  const handleConfirmDelete = () => {
    if (!docToDelete) return

    const payload = { document_id: docToDelete.id }
    deleteDocument(payload, (success) => {
      if (success) {
        listDocuments({ params: { document_type: activeType } })
      }
    }, true)

    setShowDeleteModal(false)
    setDocToDelete(null)
  }

  const handleCancelDelete = () => {
    setShowDeleteModal(false)
    setDocToDelete(null)
  }

  const handleView = (doc: any) => {

    if (doc.document_link) {
      window.open(doc.document_link, '_blank')
    } else {
      Toast('default', `${DOCUMENTS.UPLOADED_DOCUMENTS.VIEW_NOT_AVAILABLE}`)
    }
  }

  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  return (
    <>
      {
        isUploading &&
        <PageLoader />
      }
      <TitleCard
        title={DOCUMENTS.DOCUMENTS}
        description={DOCUMENTS.DOCUMENTS_DESCRIPTION}
      />

      <Tabs
        defaultActive="regulatory"
        onTabChange={(key) => {
          setActiveType(key as 'regulatory' | 'company_policy')
          setSelectedFile(null) // clear any pending upload when switching tabs
        }}
        tabs={[
          {
            key: "regulatory",
            label: `${DOCUMENTS.DOCUMENT_TYPES.REGULATORY}`,
            content: (
              <>
                {/* Drag & drop area */}
                <div
                  className={`relative border border-dashed border-[#91C5C14D] bg-secondary11 text-center p-4 md:p-6 2xl:p-10 cursor-pointer ${dragActive ? 'border-primary bg-secondary' : ''}`}
                  onDragEnter={handleDrag}
                  onDragLeave={handleDrag}
                  onDragOver={handleDrag}
                  onDrop={handleDrop}
                  onClick={() => fileInputRef.current?.click()}
                >
                  <div className="w-16 2xl:w-20 h-16 2xl:h-20 mx-auto rounded-xl bg-secondary27 flex justify-center items-center mb-4 2xl:mb-6">
                    <i className="icon icon-upload w-6 2xl:w-9 h-6 2xl:h-9 bg-grey92"></i>
                  </div>
                  <p className="text-base md:text-xl 2xl:text-2xl text-light font-semibold leading-tight mb-2.5">
                    {DOCUMENTS.UPLOAD.DRAG_DROP}
                  </p>
                  <span className="text-grey99 text-sm md:text-base 2xl:text-lg font-medium">
                    {DOCUMENTS.UPLOAD.SUPPORTED_FORMATS}
                  </span>
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept=".pdf,application/pdf"
                    className="hidden"
                    onChange={handleFileChange}
                  />
                </div>

                {/* Selected file preview */}
                {/* {selectedFile && (
                  <div className="mt-6">
                    <div className="flex items-center justify-between mb-3">
                      <h4 className="text-light font-medium">Selected Document</h4>

                      <Button
                        variant="primary"
                        onClick={handleUpload}
                        disabled={isUploading}
                        className='!w-1/3'
                      >
                        {isUploading ? 'Uploading...' : 'Upload Document'}
                      </Button>
                    </div>

                    <div className="flex items-center justify-between bg-secondary p-4 rounded-lg">
                      <div className="flex items-center gap-3">
                        <i className="icon icon-documents w-7 h-7 bg-grey92"></i>
                        <div>
                          <p className="text-light font-medium">{selectedFile.name}</p>
                          <p className="text-grey99 text-sm">{formatFileSize(selectedFile.size)}</p>
                        </div>
                      </div>
                      <button
                        onClick={clearSelectedFile}
                        disabled={isUploading}
                        className="text-red-500 hover:text-red-700 font-medium duration-300 ease-in-out cursor-pointer"
                      >
                        Remove
                      </button>
                    </div>
                  </div>
                )} */}

                {/* Uploaded documents list */}
                <div className="mt-10">
                  <div className="flex items-center justify-between flex-wrap gap-2 mb-4">
                    <h3 className="text-base md:text-lg 2xl:text-xl font-bold text-light capitalize">
                      {DOCUMENTS.UPLOAD.TITLE}
                    </h3>
                    <span className="border border-primary-c1 rounded-4xl py-1.5 px-5 2xl:text-lg font-medium text-light">
                      {currentDocs.length}  {currentDocs.length > 1 ? DOCUMENTS.UPLOAD.FILES_COUNT : DOCUMENTS.UPLOAD.FILE_COUNT}
                    </span>
                  </div>

                  {isLoading ? (
                    // <div className="text-center py-10 text-grey99">Loading...</div>
                    <PageLoader />
                  ) : currentDocs.length === 0 ? (
                    <div className="border border-grey2b bg-secondary rounded-xl p-4 md:p-6 lg:py-8 lg:px-7.5 text-center">
                      <div className="border border-dashed border-[#91C5C14D] bg-secondary11 text-center p-4 md:p-6 2xl:p-10">
                        <div className="w-16 2xl:w-20 h-16 2xl:h-20 mx-auto rounded-xl bg-secondary27 flex justify-center items-center mb-4 2xl:mb-7.5">
                          <i className="icon icon-documents w-7 2xl:w-9 h-7 2xl:h-9 bg-grey92"></i>
                        </div>
                        <p className="text-base md:text-xl 2xl:text-2xl text-light font-semibold leading-tight mb-2 md:mb-2.5">
                          {DOCUMENTS.UPLOAD.NO_DOCUMENTS}
                        </p>
                        <span className="block text-grey99 text-sm md:text-base 2xl:text-xl font-medium max-w-[596px] mx-auto">
                          {DOCUMENTS.UPLOADED_DOCUMENTS.TITLE}
                        </span>
                      </div>
                    </div>
                  ) : (
                    <div className="flex flex-col gap-y-4 2xl:gap-y-5">
                      {currentDocs.map((doc) => (
                        <div
                          key={doc.id}
                          className="w-full bg-secondary border border-grey2b p-4 2xl:py-7 2xl:px-5 rounded-xl md:rounded-2xl 2xl:rounded-[20px] flex items-center justify-between flex-col md:flex-row gap-3"
                        >
                          <div className="flex items-center gap-3 md:gap-5 2xl:gap-7.5 w-full">
                            <div className="w-16 2xl:w-20 h-16 2xl:h-20 rounded-xl bg-secondary27 flex justify-center items-center shrink-0">
                              <i className="icon icon-documents w-7 2xl:w-9 h-7 2xl:h-9 bg-grey92"></i>
                            </div>
                            <div>
                              <p className="text-base md:text-lg 2xl:text-2xl text-light font-semibold leading-tight mb-1">
                                {doc.document_name}
                              </p>
                              <span className="text-grey99 text-sm md:text-base 2xl:text-lg font-medium">
                                {doc.size ? formatFileSize(Number(doc.size)) : '—'}
                              </span>
                            </div>
                          </div>
                          <div className="flex items-center gap-2.5 w-full md:w-auto">
                            <Button
                              variant="secondary"
                              className="sm:w-fit! min-w-20 md:min-w-[110px] font-medium! 2xl:text-lg! py-3! rounded-[10px]!"
                              onClick={() => handleView(doc)}
                            >
                              {DOCUMENTS.UPLOADED_DOCUMENTS.VIEW}
                            </Button>
                            <Button
                              variant="danger"
                              className="sm:w-fit! min-w-20 md:min-w-[110px] font-medium! 2xl:text-lg! py-3! rounded-[10px]!"
                              onClick={() => openDeleteModal({ id: doc.id, name: doc.document_name })}
                            >
                              {DOCUMENTS.UPLOADED_DOCUMENTS.REMOVE}
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </>
            ),
          },
          {
            key: "company_policy",
            label: `${DOCUMENTS.DOCUMENT_TYPES.COMPANY_POLICY}`,
            content: (
              <>
                {/* Same drag & drop UI */}
                <div
                  className={`relative border border-dashed border-[#91C5C14D] bg-secondary11 text-center p-4 md:p-6 2xl:p-10 cursor-pointer ${dragActive ? 'border-primary bg-secondary' : ''}`}
                  onDragEnter={handleDrag}
                  onDragLeave={handleDrag}
                  onDragOver={handleDrag}
                  onDrop={handleDrop}
                  onClick={() => fileInputRef.current?.click()}
                >
                  <div className="w-16 2xl:w-20 h-16 2xl:h-20 mx-auto rounded-xl bg-secondary27 flex justify-center items-center mb-4 2xl:mb-6">
                    <i className="icon icon-upload w-6 2xl:w-9 h-6 2xl:h-9 bg-grey92"></i>
                  </div>
                  <p className="text-base md:text-xl 2xl:text-2xl text-light font-semibold leading-tight mb-2.5">
                    {DOCUMENTS.UPLOAD.DRAG_DROP}
                  </p>
                  <span className="text-grey99 text-sm md:text-base 2xl:text-lg font-medium">
                    {DOCUMENTS.UPLOAD.SUPPORTED_FORMATS}
                  </span>
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept=".pdf,application/pdf"
                    className="hidden"
                    onChange={handleFileChange}
                  />
                </div>

                {/* {selectedFile && (
                  <div className="mt-6">
                    <div className="flex items-center justify-between mb-3">
                      <h4 className="text-light font-medium">Selected Document</h4>
                      <Button
                        variant="primary"
                        onClick={handleUpload}
                        disabled={isLoading}
                      >
                        {isLoading ? 'Uploading...' : 'Upload Document'}
                      </Button>
                    </div>

                    <div className="flex items-center justify-between bg-secondary p-4 rounded-lg">
                      <div className="flex items-center gap-3">
                        <i className="icon icon-documents w-7 h-7 bg-grey92"></i>
                        <div>
                          <p className="text-light font-medium">{selectedFile.name}</p>
                          <p className="text-grey99 text-sm">{formatFileSize(selectedFile.size)}</p>
                        </div>
                      </div>
                      <button
                        onClick={clearSelectedFile}
                        className="text-red-500 hover:text-red-700 font-medium duration-300 ease-in-out cursor-pointer"
                      >
                        Remove
                      </button>
                    </div>
                  </div>
                )} */}

                {/* Uploaded company policy documents */}
                <div className="mt-10">
                  <div className="flex items-center justify-between flex-wrap gap-2 mb-4">
                    <h3 className="text-base md:text-lg 2xl:text-xl font-bold text-light capitalize">
                      {DOCUMENTS.UPLOAD.COMPANY_POLICY_TITLE}
                    </h3>
                    <span className="border border-primary-c1 rounded-4xl py-1.5 px-5 2xl:text-lg font-medium text-light">
                      {currentDocs.length}  {currentDocs.length > 1 ? DOCUMENTS.UPLOAD.FILES_COUNT : DOCUMENTS.UPLOAD.FILE_COUNT}
                    </span>
                  </div>

                  {isLoading ? (
                    <div className="text-center py-10 text-grey99">Loading...</div>
                  ) : currentDocs.length === 0 ? (
                    <div className="border border-grey2b bg-secondary rounded-xl p-4 md:p-6 lg:py-8 lg:px-7.5 text-center">
                      <div className="border border-dashed border-[#91C5C14D] bg-secondary11 text-center p-4 md:p-6 2xl:p-10">
                        <div className="w-16 2xl:w-20 h-16 2xl:h-20 mx-auto rounded-xl bg-secondary27 flex justify-center items-center mb-4 2xl:mb-7.5">
                          <i className="icon icon-documents w-7 2xl:w-9 h-7 2xl:h-9 bg-grey92"></i>
                        </div>
                        <p className="text-base md:text-xl 2xl:text-2xl text-light font-semibold leading-tight mb-2 md:mb-2.5">
                          {DOCUMENTS.UPLOAD.NO_DOCUMENTS}
                        </p>
                        <span className="block text-grey99 text-sm md:text-base 2xl:text-xl font-medium max-w-[596px] mx-auto">
                          {DOCUMENTS.UPLOAD.COMPANY_POLICY_AI_TITLE}
                        </span>
                      </div>
                    </div>
                  ) : (
                    <div className="flex flex-col gap-y-4 2xl:gap-y-5">
                      {currentDocs.map((doc) => (
                        <div
                          key={doc.id}
                          className="w-full bg-secondary border border-grey2b p-4 2xl:py-7 2xl:px-5 rounded-xl md:rounded-2xl 2xl:rounded-[20px] flex items-center justify-between flex-col md:flex-row gap-3"
                        >
                          <div className="flex items-center gap-3 md:gap-5 2xl:gap-7.5 w-full">
                            <div className="w-16 2xl:w-20 h-16 2xl:h-20 rounded-xl bg-secondary27 flex justify-center items-center shrink-0">
                              <i className="icon icon-documents w-7 2xl:w-9 h-7 2xl:h-9 bg-grey92"></i>
                            </div>
                            <div>
                              <p className="text-base md:text-lg 2xl:text-2xl text-light font-semibold leading-tight mb-1">
                                {doc.document_name}
                              </p>
                              <span className="text-grey99 text-sm md:text-base 2xl:text-lg font-medium">
                                {doc.size ? formatFileSize(Number(doc.size)) : '—'}
                              </span>
                            </div>
                          </div>
                          <div className="flex items-center gap-2.5 w-full md:w-auto">
                            <Button
                              variant="secondary"
                              className="sm:w-fit! min-w-20 md:min-w-[110px] font-medium! 2xl:text-lg! py-3! rounded-[10px]!"
                              onClick={() => handleView(doc)}
                            >
                              {DOCUMENTS.UPLOADED_DOCUMENTS.VIEW}
                            </Button>
                            <Button
                              variant="danger"
                              className="sm:w-fit! min-w-20 md:min-w-[110px] font-medium! 2xl:text-lg! py-3! rounded-[10px]!"
                              onClick={() => openDeleteModal({ id: doc.id, name: doc.name })}
                            >
                              {DOCUMENTS.UPLOADED_DOCUMENTS.REMOVE}
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </>
            ),
          },
        ]}
      />

      {/* Delete Confirmation Modal */}
      <Modal
        open={showDeleteModal}
        onClose={handleCancelDelete}
        title={DOCUMENTS.DELETE_CONFIRMATION.TITLE}
      >
        <div className="text-center text-light mb-6">
          <p className="text-base lg:text-lg mb-2">{DOCUMENTS.DELETE_CONFIRMATION.MESSAGE}</p>
          <p className="font-semibold text-base lg:text-lg break-words">
            "{docToDelete?.name || 'this document'}"
          </p>
          <p className="text-sm text-grey99 mt-2">
            {DOCUMENTS.DELETE_CONFIRMATION.WARNING}
          </p>
        </div>

        <div className="flex justify-center gap-4">
          <Button
            variant="secondary"
            onClick={handleCancelDelete}
            className="min-w-[120px]"
          >
            {DOCUMENTS.DELETE_CONFIRMATION.CANCEL}
          </Button>
          <Button
            variant="danger"
            onClick={handleConfirmDelete}
            className="min-w-[120px]"
            disabled={isLoading}
          >
            {isLoading ? `${DOCUMENTS.DELETE_CONFIRMATION.DELETING}` : `${DOCUMENTS.DELETE_CONFIRMATION.DELETE}`}
          </Button>
        </div>
      </Modal>
    </>
  )
}