'use client'

import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { FileText, Download, ExternalLink, Loader2 } from 'lucide-react'
import { toast } from 'sonner'

interface MultiWindowDocViewerProps {
  roundId: string
  projectId: string
}

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

function getFileIcon(mimeType: string) {
  if (mimeType.startsWith('image/')) return '🖼️'
  if (mimeType.startsWith('video/')) return '🎥'
  if (mimeType.includes('pdf')) return '📄'
  if (mimeType.includes('word') || mimeType.includes('document')) return '📝'
  if (mimeType.includes('sheet') || mimeType.includes('excel')) return '📊'
  if (mimeType.includes('presentation') || mimeType.includes('powerpoint')) return '📊'
  return '📎'
}

function canPreviewInBrowser(mimeType: string): boolean {
  return (
    mimeType === 'application/pdf' ||
    mimeType.startsWith('image/') ||
    mimeType.startsWith('video/') ||
    mimeType.startsWith('text/')
  )
}

function FileCard({ file }: { file: { id: string; fileName: string; mimeType: string; size: number; bucket: string; objectKey: string } }) {
  const [loadingAction, setLoadingAction] = useState<'download' | 'preview' | null>(null)

  const downloadUrlQuery = trpc.file.getDownloadUrl.useQuery(
    { bucket: file.bucket, objectKey: file.objectKey },
    { enabled: false } // manual trigger
  )

  const handleAction = async (action: 'download' | 'preview') => {
    setLoadingAction(action)
    try {
      const result = await downloadUrlQuery.refetch()
      if (result.data?.url) {
        if (action === 'preview' && canPreviewInBrowser(file.mimeType)) {
          window.open(result.data.url, '_blank')
        } else {
          // Download: create temp link and click
          const a = document.createElement('a')
          a.href = result.data.url
          a.download = file.fileName
          a.target = '_blank'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      }
    } catch {
      toast.error('Failed to get file URL')
    } finally {
      setLoadingAction(null)
    }
  }

  return (
    <Card className="overflow-hidden">
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <div className="text-2xl">{getFileIcon(file.mimeType || '')}</div>
          <div className="flex-1 min-w-0">
            <p className="font-medium text-sm truncate" title={file.fileName}>
              {file.fileName}
            </p>
            <div className="flex items-center gap-2 mt-1">
              <Badge variant="outline" className="text-xs">
                {file.mimeType?.split('/')[1]?.toUpperCase() || 'FILE'}
              </Badge>
              {file.size > 0 && (
                <span className="text-xs text-muted-foreground">
                  {formatFileSize(file.size)}
                </span>
              )}
            </div>
            <div className="flex gap-2 mt-3">
              <Button
                size="sm"
                variant="outline"
                className="h-7 text-xs"
                onClick={() => handleAction('download')}
                disabled={loadingAction !== null}
              >
                {loadingAction === 'download' ? (
                  <Loader2 className="mr-1 h-3 w-3 animate-spin" />
                ) : (
                  <Download className="mr-1 h-3 w-3" />
                )}
                Download
              </Button>
              {canPreviewInBrowser(file.mimeType) && (
                <Button
                  size="sm"
                  variant="ghost"
                  className="h-7 text-xs"
                  onClick={() => handleAction('preview')}
                  disabled={loadingAction !== null}
                >
                  {loadingAction === 'preview' ? (
                    <Loader2 className="mr-1 h-3 w-3 animate-spin" />
                  ) : (
                    <ExternalLink className="mr-1 h-3 w-3" />
                  )}
                  Preview
                </Button>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

export function MultiWindowDocViewer({ roundId, projectId }: MultiWindowDocViewerProps) {
  const { data: files, isLoading } = trpc.file.listByProject.useQuery(
    { projectId },
    { enabled: !!projectId }
  )

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-48" />
        </CardHeader>
        <CardContent>
          <Skeleton className="h-64" />
        </CardContent>
      </Card>
    )
  }

  if (!files || files.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Documents</CardTitle>
          <CardDescription>Project files and submissions</CardDescription>
        </CardHeader>
        <CardContent className="text-center py-8">
          <FileText className="h-12 w-12 text-muted-foreground/50 mx-auto mb-3" />
          <p className="text-sm text-muted-foreground">No files uploaded</p>
        </CardContent>
      </Card>
    )
  }

  // Group files by round name or "General"
  const grouped: Record<string, typeof files> = {}
  for (const file of files) {
    const groupName = file.requirement?.round?.name ?? 'General'
    if (!grouped[groupName]) grouped[groupName] = []
    grouped[groupName].push(file)
  }

  const groupNames = Object.keys(grouped)

  return (
    <Card>
      <CardHeader>
        <CardTitle>Documents</CardTitle>
        <CardDescription>
          {files.length} file{files.length !== 1 ? 's' : ''} submitted
        </CardDescription>
      </CardHeader>
      <CardContent>
        {groupNames.length === 1 ? (
          // Single group — no need for headers
          <div className="grid gap-3 sm:grid-cols-2">
            {grouped[groupNames[0]].map((file) => (
              <FileCard key={file.id} file={file} />
            ))}
          </div>
        ) : (
          // Multiple groups — show headers
          <div className="space-y-6">
            {groupNames.map((groupName) => (
              <div key={groupName}>
                <h4 className="font-medium text-sm text-muted-foreground mb-3">
                  {groupName}
                  <Badge variant="secondary" className="ml-2 text-xs">
                    {grouped[groupName].length}
                  </Badge>
                </h4>
                <div className="grid gap-3 sm:grid-cols-2">
                  {grouped[groupName].map((file) => (
                    <FileCard key={file.id} file={file} />
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}