'use client'

import { useState, useCallback, useRef } from 'react'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Progress } from '@/components/ui/progress'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  ArrowLeft,
  CheckCircle2,
  Upload,
  Search,
  X,
  Loader2,
  FileUp,
  AlertCircle,
} from 'lucide-react'
import { cn, formatFileSize } from '@/lib/utils'
import { Pagination } from '@/components/shared/pagination'

type UploadState = {
  progress: number
  status: 'uploading' | 'complete' | 'error'
  error?: string
}

// Key: `${projectId}:${requirementId}`
type UploadMap = Record<string, UploadState>

export default function BulkUploadPage() {
  const [windowId, setWindowId] = useState('')
  const [search, setSearch] = useState('')
  const [debouncedSearch, setDebouncedSearch] = useState('')
  const [statusFilter, setStatusFilter] = useState<'all' | 'missing' | 'complete'>('all')
  const [page, setPage] = useState(1)
  const [perPage, setPerPage] = useState(50)
  const [uploads, setUploads] = useState<UploadMap>({})

  // Bulk dialog
  const [bulkProject, setBulkProject] = useState<{
    id: string
    title: string
    requirements: Array<{
      requirementId: string
      label: string
      mimeTypes: string[]
      required: boolean
      file: { id: string; fileName: string } | null
    }>
  } | null>(null)
  const [bulkFiles, setBulkFiles] = useState<Record<string, File | null>>({})

  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({})

  // Debounce search
  const searchTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
  const handleSearchChange = useCallback((value: string) => {
    setSearch(value)
    clearTimeout(searchTimer.current)
    searchTimer.current = setTimeout(() => {
      setDebouncedSearch(value)
      setPage(1)
    }, 300)
  }, [])

  // Queries
  const { data: windows, isLoading: windowsLoading } = trpc.file.listSubmissionWindows.useQuery()

  const { data, isLoading, refetch } = trpc.file.listProjectsWithUploadStatus.useQuery(
    {
      submissionWindowId: windowId,
      search: debouncedSearch || undefined,
      status: statusFilter,
      page,
      pageSize: perPage,
    },
    { enabled: !!windowId }
  )

  const uploadMutation = trpc.file.adminUploadForRequirement.useMutation()

  // Upload a single file for a project requirement
  const uploadFileForRequirement = useCallback(
    async (
      projectId: string,
      requirementId: string,
      file: File,
      submissionWindowId: string
    ) => {
      const key = `${projectId}:${requirementId}`
      setUploads((prev) => ({
        ...prev,
        [key]: { progress: 0, status: 'uploading' },
      }))

      try {
        const { uploadUrl } = await uploadMutation.mutateAsync({
          projectId,
          fileName: file.name,
          mimeType: file.type || 'application/octet-stream',
          size: file.size,
          submissionWindowId,
          submissionFileRequirementId: requirementId,
        })

        // XHR upload with progress
        await new Promise<void>((resolve, reject) => {
          const xhr = new XMLHttpRequest()
          xhr.upload.addEventListener('progress', (event) => {
            if (event.lengthComputable) {
              const progress = Math.round((event.loaded / event.total) * 100)
              setUploads((prev) => ({
                ...prev,
                [key]: { progress, status: 'uploading' },
              }))
            }
          })
          xhr.addEventListener('load', () => {
            if (xhr.status >= 200 && xhr.status < 300) resolve()
            else reject(new Error(`Upload failed with status ${xhr.status}`))
          })
          xhr.addEventListener('error', () => reject(new Error('Network error')))
          xhr.open('PUT', uploadUrl)
          xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream')
          xhr.send(file)
        })

        setUploads((prev) => ({
          ...prev,
          [key]: { progress: 100, status: 'complete' },
        }))

        // Refetch data to show updated status
        refetch()
      } catch (error) {
        const msg = error instanceof Error ? error.message : 'Upload failed'
        setUploads((prev) => ({
          ...prev,
          [key]: { progress: 0, status: 'error', error: msg },
        }))
        toast.error(`Upload failed: ${msg}`)
      }
    },
    [uploadMutation, refetch]
  )

  // Handle single cell file pick
  const handleCellUpload = useCallback(
    (projectId: string, requirementId: string, mimeTypes: string[]) => {
      const input = document.createElement('input')
      input.type = 'file'
      if (mimeTypes.length > 0) {
        input.accept = mimeTypes.join(',')
      }
      input.onchange = (e) => {
        const file = (e.target as HTMLInputElement).files?.[0]
        if (file && windowId) {
          uploadFileForRequirement(projectId, requirementId, file, windowId)
        }
      }
      input.click()
    },
    [windowId, uploadFileForRequirement]
  )

  // Handle bulk row upload
  const handleBulkUploadAll = useCallback(async () => {
    if (!bulkProject || !windowId) return

    const entries = Object.entries(bulkFiles).filter(
      ([, file]) => file !== null
    ) as Array<[string, File]>

    if (entries.length === 0) {
      toast.error('No files selected')
      return
    }

    // Upload all in parallel
    await Promise.allSettled(
      entries.map(([reqId, file]) =>
        uploadFileForRequirement(bulkProject.id, reqId, file, windowId)
      )
    )

    setBulkProject(null)
    setBulkFiles({})
    toast.success('Bulk upload complete')
  }, [bulkProject, bulkFiles, windowId, uploadFileForRequirement])

  const progressPercent =
    data && data.totalProjects > 0
      ? Math.round((data.completeCount / data.totalProjects) * 100)
      : 0

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/projects">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Bulk Document Upload</h1>
          <p className="text-muted-foreground">
            Upload required documents for multiple projects at once
          </p>
        </div>
      </div>

      {/* Window Selector */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Submission Window</CardTitle>
        </CardHeader>
        <CardContent>
          {windowsLoading ? (
            <Skeleton className="h-10 w-full" />
          ) : (
            <Select
              value={windowId}
              onValueChange={(v) => {
                setWindowId(v)
                setPage(1)
                setUploads({})
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select a submission window..." />
              </SelectTrigger>
              <SelectContent>
                {windows?.map((w) => (
                  <SelectItem key={w.id} value={w.id}>
                    {w.competition.program.name} {w.competition.program.year} &mdash; {w.name}{' '}
                    ({w.fileRequirements.length} requirement
                    {w.fileRequirements.length !== 1 ? 's' : ''})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}
        </CardContent>
      </Card>

      {/* Content (only if window selected) */}
      {windowId && data && (
        <>
          {/* Progress Summary */}
          <Card>
            <CardContent className="py-4">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-medium">
                  {data.completeCount} / {data.totalProjects} projects have complete documents
                </p>
                <Badge variant={progressPercent === 100 ? 'success' : 'secondary'}>
                  {progressPercent}%
                </Badge>
              </div>
              <Progress value={progressPercent} className="h-2" />
            </CardContent>
          </Card>

          {/* Filters */}
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                value={search}
                onChange={(e) => handleSearchChange(e.target.value)}
                placeholder="Search by project name or team..."
                className="pl-10 pr-10"
              />
              {search && (
                <button
                  type="button"
                  onClick={() => {
                    setSearch('')
                    setDebouncedSearch('')
                    setPage(1)
                  }}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                >
                  <X className="h-4 w-4" />
                </button>
              )}
            </div>
            <Select
              value={statusFilter}
              onValueChange={(v) => {
                setStatusFilter(v as 'all' | 'missing' | 'complete')
                setPage(1)
              }}
            >
              <SelectTrigger className="w-[180px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All projects</SelectItem>
                <SelectItem value="missing">Missing files</SelectItem>
                <SelectItem value="complete">Complete</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Table */}
          {isLoading ? (
            <Card>
              <CardContent className="p-6">
                <div className="space-y-4">
                  {[...Array(5)].map((_, i) => (
                    <Skeleton key={i} className="h-12 w-full" />
                  ))}
                </div>
              </CardContent>
            </Card>
          ) : data.projects.length === 0 ? (
            <Card>
              <CardContent className="flex flex-col items-center justify-center py-12 text-center">
                <FileUp className="h-12 w-12 text-muted-foreground/50" />
                <p className="mt-2 font-medium">No projects found</p>
                <p className="text-sm text-muted-foreground">
                  {debouncedSearch ? 'Try adjusting your search' : 'No projects in this program'}
                </p>
              </CardContent>
            </Card>
          ) : (
            <>
              <Card>
                <div className="overflow-x-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="min-w-[200px]">Project</TableHead>
                        <TableHead>Applicant</TableHead>
                        {data.requirements.map((req) => (
                          <TableHead key={req.id} className="min-w-[160px] text-center">
                            <div>
                              {req.label}
                              {req.required && (
                                <span className="text-destructive ml-0.5">*</span>
                              )}
                            </div>
                            <div className="text-[10px] font-normal text-muted-foreground">
                              {req.mimeTypes.join(', ') || 'Any'}
                            </div>
                          </TableHead>
                        ))}
                        <TableHead className="text-center">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {data.projects.map((row) => {
                        const missingRequired = row.requirements.filter(
                          (r) => r.required && !r.file
                        )
                        return (
                          <TableRow
                            key={row.project.id}
                            className={row.isComplete ? 'bg-green-50/50 dark:bg-green-950/10' : ''}
                          >
                            <TableCell>
                              <Link
                                href={`/admin/projects/${row.project.id}`}
                                className="font-medium hover:underline"
                              >
                                {row.project.title}
                              </Link>
                            </TableCell>
                            <TableCell className="text-sm text-muted-foreground">
                              {row.project.submittedBy?.name ||
                                row.project.submittedBy?.email ||
                                row.project.teamName ||
                                '-'}
                            </TableCell>
                            {row.requirements.map((req) => {
                              const uploadKey = `${row.project.id}:${req.requirementId}`
                              const uploadState = uploads[uploadKey]

                              return (
                                <TableCell key={req.requirementId} className="text-center">
                                  {uploadState?.status === 'uploading' ? (
                                    <div className="flex flex-col items-center gap-1">
                                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
                                      <Progress
                                        value={uploadState.progress}
                                        className="h-1 w-16"
                                      />
                                      <span className="text-[10px] text-muted-foreground">
                                        {uploadState.progress}%
                                      </span>
                                    </div>
                                  ) : uploadState?.status === 'error' ? (
                                    <div className="flex flex-col items-center gap-1">
                                      <AlertCircle className="h-4 w-4 text-destructive" />
                                      <Button
                                        variant="ghost"
                                        size="sm"
                                        className="h-6 px-2 text-[10px]"
                                        onClick={() =>
                                          handleCellUpload(
                                            row.project.id,
                                            req.requirementId,
                                            req.mimeTypes
                                          )
                                        }
                                      >
                                        Retry
                                      </Button>
                                    </div>
                                  ) : req.file || uploadState?.status === 'complete' ? (
                                    <div className="flex flex-col items-center gap-1">
                                      <CheckCircle2 className="h-4 w-4 text-green-600" />
                                      <span className="text-[10px] text-muted-foreground truncate max-w-[120px]">
                                        {req.file?.fileName ?? 'Uploaded'}
                                      </span>
                                    </div>
                                  ) : (
                                    <Button
                                      variant="outline"
                                      size="sm"
                                      className="h-7 text-xs"
                                      onClick={() =>
                                        handleCellUpload(
                                          row.project.id,
                                          req.requirementId,
                                          req.mimeTypes
                                        )
                                      }
                                    >
                                      <Upload className="mr-1 h-3 w-3" />
                                      Upload
                                    </Button>
                                  )}
                                </TableCell>
                              )
                            })}
                            <TableCell className="text-center">
                              {missingRequired.length > 0 && (
                                <Button
                                  variant="secondary"
                                  size="sm"
                                  className="h-7 text-xs"
                                  onClick={() => {
                                    setBulkProject({
                                      id: row.project.id,
                                      title: row.project.title,
                                      requirements: row.requirements,
                                    })
                                    setBulkFiles({})
                                  }}
                                >
                                  <FileUp className="mr-1 h-3 w-3" />
                                  Upload All ({missingRequired.length})
                                </Button>
                              )}
                              {row.isComplete && (
                                <Badge variant="success" className="text-xs">
                                  Complete
                                </Badge>
                              )}
                            </TableCell>
                          </TableRow>
                        )
                      })}
                    </TableBody>
                  </Table>
                </div>
              </Card>

              <Pagination
                page={data.page}
                totalPages={data.totalPages}
                total={data.total}
                perPage={perPage}
                onPageChange={setPage}
                onPerPageChange={(pp) => {
                  setPerPage(pp)
                  setPage(1)
                }}
              />
            </>
          )}
        </>
      )}

      {/* Bulk Upload Dialog */}
      <Dialog
        open={!!bulkProject}
        onOpenChange={(open) => {
          if (!open) {
            setBulkProject(null)
            setBulkFiles({})
          }
        }}
      >
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>Upload Files for {bulkProject?.title}</DialogTitle>
            <DialogDescription>
              Select files for each missing requirement, then upload all at once.
            </DialogDescription>
          </DialogHeader>

          {bulkProject && (
            <div className="space-y-4 py-2">
              {bulkProject.requirements
                .filter((r) => !r.file)
                .map((req) => {
                  const selectedFile = bulkFiles[req.requirementId]
                  const uploadKey = `${bulkProject.id}:${req.requirementId}`
                  const uploadState = uploads[uploadKey]

                  return (
                    <div
                      key={req.requirementId}
                      className={cn(
                        'flex items-center gap-3 rounded-lg border p-3',
                        uploadState?.status === 'complete' &&
                          'border-green-500/50 bg-green-500/5',
                        uploadState?.status === 'error' &&
                          'border-destructive/50 bg-destructive/5'
                      )}
                    >
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium">
                          {req.label}
                          {req.required && (
                            <span className="text-destructive ml-0.5">*</span>
                          )}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {req.mimeTypes.join(', ') || 'Any file type'}
                        </p>

                        {selectedFile && !uploadState && (
                          <div className="flex items-center gap-2 mt-1">
                            <Badge variant="outline" className="text-xs">
                              {selectedFile.name}
                            </Badge>
                            <span className="text-[10px] text-muted-foreground">
                              {formatFileSize(selectedFile.size)}
                            </span>
                            <button
                              type="button"
                              onClick={() =>
                                setBulkFiles((prev) => ({
                                  ...prev,
                                  [req.requirementId]: null,
                                }))
                              }
                              className="text-muted-foreground hover:text-foreground"
                            >
                              <X className="h-3 w-3" />
                            </button>
                          </div>
                        )}

                        {uploadState?.status === 'uploading' && (
                          <div className="flex items-center gap-2 mt-1">
                            <Progress
                              value={uploadState.progress}
                              className="h-1 flex-1"
                            />
                            <span className="text-xs text-muted-foreground">
                              {uploadState.progress}%
                            </span>
                          </div>
                        )}

                        {uploadState?.status === 'error' && (
                          <p className="text-xs text-destructive mt-1">
                            {uploadState.error}
                          </p>
                        )}
                      </div>

                      <div className="shrink-0">
                        {uploadState?.status === 'complete' ? (
                          <CheckCircle2 className="h-5 w-5 text-green-600" />
                        ) : uploadState?.status === 'uploading' ? (
                          <Loader2 className="h-5 w-5 animate-spin text-primary" />
                        ) : (
                          <>
                            <input
                              ref={(el) => {
                                fileInputRefs.current[req.requirementId] = el
                              }}
                              type="file"
                              className="hidden"
                              accept={
                                req.mimeTypes.length > 0
                                  ? req.mimeTypes.join(',')
                                  : undefined
                              }
                              onChange={(e) => {
                                const file = e.target.files?.[0]
                                if (file) {
                                  setBulkFiles((prev) => ({
                                    ...prev,
                                    [req.requirementId]: file,
                                  }))
                                }
                                e.target.value = ''
                              }}
                            />
                            <Button
                              variant="outline"
                              size="sm"
                              className="h-8"
                              onClick={() =>
                                fileInputRefs.current[req.requirementId]?.click()
                              }
                            >
                              {selectedFile ? 'Change' : 'Select'}
                            </Button>
                          </>
                        )}
                      </div>
                    </div>
                  )
                })}

              <div className="flex justify-end gap-2 pt-2 border-t">
                <Button
                  variant="outline"
                  onClick={() => {
                    setBulkProject(null)
                    setBulkFiles({})
                  }}
                >
                  Cancel
                </Button>
                <Button
                  onClick={handleBulkUploadAll}
                  disabled={
                    Object.values(bulkFiles).filter(Boolean).length === 0 ||
                    Object.values(uploads).some((u) => u.status === 'uploading')
                  }
                >
                  {Object.values(uploads).some((u) => u.status === 'uploading') ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Upload className="mr-2 h-4 w-4" />
                  )}
                  Upload {Object.values(bulkFiles).filter(Boolean).length} File
                  {Object.values(bulkFiles).filter(Boolean).length !== 1 ? 's' : ''}
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}