'use client'

import { useState, useRef } from 'react'
import { useRouter } from 'next/navigation'
import PageLayout from '../../../components/PageLayout'
import { DocumentArrowUpIcon, XMarkIcon } from '@heroicons/react/24/outline'
import useAuthStore from '../../../store/authStore'
import { useUserStatus } from '../../../hooks/useUserStatus'

const DOC_TYPES = ['Handelsregisterauszug', 'Gewerbeanmeldung', 'Steuerbescheid', 'Sonstiges']

export default function CompanyIdUploadPage() {
  const router = useRouter()
  const { accessToken } = useAuthStore()
  const { refreshStatus } = useUserStatus()
  
  const [docNumber, setDocNumber] = useState('')
  const [docType, setDocType] = useState('')
  const [issueDate, setIssueDate] = useState('')
  const [frontFile, setFrontFile] = useState<File | null>(null)
  const [extraFile, setExtraFile] = useState<File | null>(null)
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState(false)

  const frontRef = useRef<HTMLInputElement | null>(null)
  const extraRef = useRef<HTMLInputElement | null>(null)

  const handleFile = (file: File, which: 'front' | 'extra') => {
    if (file.size > 10 * 1024 * 1024) {
      setError('Datei größer als 10 MB.')
      return
    }
    setError('')
    which === 'front' ? setFrontFile(file) : setExtraFile(file)
  }

  const dropHandlers = {
    onDragOver: (e: React.DragEvent) => e.preventDefault(),
    onDragEnter: (e: React.DragEvent) => e.preventDefault()
  }

  const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!docNumber.trim() || !docType || !issueDate || !frontFile) {
      setError('Bitte alle Pflichtfelder (mit *) ausfüllen.')
      return
    }
    
    if (!accessToken) {
      setError('Not authenticated. Please log in again.')
      return
    }
    
    setError('')
    setSubmitting(true)
    
    try {
      const formData = new FormData()
      formData.append('frontFile', frontFile)
      if (extraFile) {
        formData.append('backFile', extraFile)
      }
      formData.append('docType', docType)
      formData.append('docNumber', docNumber.trim())
      formData.append('issueDate', issueDate)

      const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/upload/company-id`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${accessToken}`
        },
        body: formData
      })

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({ message: 'Upload failed' }))
        throw new Error(errorData.message || 'Upload failed')
      }

      setSuccess(true)
      
      // Refresh user status to update verification state
      await refreshStatus()
      
      // Redirect to next step after short delay
      setTimeout(() => {
        router.push('/quickaction-dashboard/register-additional-information')
      }, 1500)
      
    } catch (error: any) {
      console.error('Company ID upload error:', error)
      setError(error.message || 'Upload fehlgeschlagen.')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <PageLayout>
      <div className="relative flex flex-col flex-1 w-full px-5 lg:px-10 py-10">
        {/* Background (same as personal) */}
        <div className="fixed inset-0 -z-10">
          <div className="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900/95 via-gray-900/80 to-gray-900" />
          <svg aria-hidden="true" className="absolute inset-0 -z-10 h-full w-full stroke-white/10">
            <defs>
              <pattern id="company-id-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
                <path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
              </pattern>
            </defs>
            <rect fill="url(#company-id-pattern)" width="100%" height="100%" strokeWidth={0} />
          </svg>
          <div aria-hidden="true" className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48">
            <div
              className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-50"
              style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
            />
          </div>
        </div>

        <form
          onSubmit={submit}
          className="relative max-w-7xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10 overflow-hidden"
        >
          <div className="px-6 py-8 sm:px-12 lg:px-16">
            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">
              Company Document Verification
            </h1>
            <p className="text-sm text-gray-600 mb-8">
              Upload a valid company registration or compliance document
            </p>

            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              <div className="md:col-span-2">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Document Number *
                </label>
                <input
                  value={docNumber}
                  onChange={e => setDocNumber(e.target.value)}
                  className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  placeholder="Enter reference number"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Document Type *
                </label>
                <select
                  value={docType}
                  onChange={e => setDocType(e.target.value)}
                  className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  required
                >
                  <option value="">Select type</option>
                  {DOC_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Issue Date *
                </label>
                <input
                  type="date"
                  value={issueDate}
                  onChange={e => setIssueDate(e.target.value)}
                  className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  required
                />
              </div>

              <div className="hidden lg:block"></div>
            </div>

            {/* Upload Areas */}
            <div className={`mt-8 grid gap-6 ${extraFile ? 'md:grid-cols-2 lg:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-2'} items-stretch`}>
              <div
                {...dropHandlers}
                onDrop={e => {
                  e.preventDefault()
                  const f = e.dataTransfer.files?.[0]
                  if (f) handleFile(f, 'front')
                }}
                onClick={() => frontRef.current?.click()}
                className="group flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
              >
                <input
                  ref={frontRef}
                  type="file"
                  accept="image/*,application/pdf"
                  className="hidden"
                  onChange={e => {
                    const f = e.target.files?.[0]
                    if (f) handleFile(f, 'front')
                  }}
                />
                {frontFile ? (
                  <div className="flex flex-col items-center">
                    <DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
                    <p className="text-sm font-medium text-gray-800">{frontFile.name}</p>
                    <button
                      type="button"
                      onClick={e => { e.stopPropagation(); setFrontFile(null) }}
                      className="mt-3 inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-100"
                    >
                      <XMarkIcon className="h-4 w-4" /> Remove
                    </button>
                  </div>
                ) : (
                  <>
                    <DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
                    <p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
                      Upload primary document *
                    </p>
                    <p className="mt-2 text-xs text-gray-500">
                      PNG, JPG, PDF up to 10MB
                    </p>
                  </>
                )}
              </div>

              <div
                {...dropHandlers}
                onDrop={e => {
                  e.preventDefault()
                  const f = e.dataTransfer.files?.[0]
                  if (f) handleFile(f, 'extra')
                }}
                onClick={() => extraRef.current?.click()}
                className="group flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
              >
                <input
                  ref={extraRef}
                  type="file"
                  accept="image/*,application/pdf"
                  className="hidden"
                  onChange={e => {
                    const f = e.target.files?.[0]
                    if (f) handleFile(f, 'extra')
                  }}
                />
                {extraFile ? (
                  <div className="flex flex-col items-center">
                    <DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
                    <p className="text-sm font-medium text-gray-800">{extraFile.name}</p>
                    <button
                      type="button"
                      onClick={e => { e.stopPropagation(); setExtraFile(null) }}
                      className="mt-3 inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-100"
                    >
                      <XMarkIcon className="h-4 w-4" /> Remove
                    </button>
                  </div>
                ) : (
                  <>
                    <DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
                    <p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
                      Optional supporting file
                    </p>
                    <p className="mt-2 text-xs text-gray-500">
                      (Invoice, license, certificate…)
                    </p>
                  </>
                )}
              </div>

              {extraFile && <div className="hidden lg:flex flex-col justify-center rounded-lg border-2 border-dashed border-transparent px-4 py-10 text-center text-xs text-gray-400">
                <span className="font-medium text-gray-500">Extra space for clarity</span>
              </div>}
            </div>

            {/* Info */}
            <div className="mt-8 rounded-lg bg-indigo-50/60 border border-indigo-100 px-5 py-5">
              <p className="text-sm font-semibold text-indigo-900 mb-3">
                Guidelines:
              </p>
              <ul className="text-sm text-indigo-800 space-y-1 list-disc pl-5">
                <li>Document must be valid & readable</li>
                <li>Complete page (no cropping)</li>
                <li>Good lighting (no glare)</li>
                <li>PDF or clear image</li>
                <li>Supplementary evidence speeds review</li>
              </ul>
            </div>

            {error && (
              <div className="mt-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">
                {error}
              </div>
            )}
            {success && (
              <div className="mt-6 rounded-md border border-green-300 bg-green-50 px-4 py-3 text-sm text-green-700">
                Dokumente erfolgreich hochgeladen.
              </div>
            )}

            <div className="mt-8 flex justify-end">
              <button
                type="submit"
                disabled={submitting || success}
                className="inline-flex items-center justify-center rounded-md bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
              >
                {submitting ? 'Uploading…' : success ? 'Saved' : 'Upload & Continue'}
              </button>
            </div>
          </div>
        </form>
      </div>
    </PageLayout>
  )
}