'use client'

import { trpc } from '@/lib/trpc/client'
import { FileViewer } from '@/components/shared/file-viewer'
import { Skeleton } from '@/components/ui/skeleton'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { AlertCircle, FileX } from 'lucide-react'

interface ProjectFilesSectionProps {
  projectId: string
  stageId: string
}

export function ProjectFilesSection({ projectId, stageId }: ProjectFilesSectionProps) {
  const { data: groupedFiles, isLoading, error } = trpc.file.listByProjectForStage.useQuery({
    projectId,
    stageId,
  })

  if (isLoading) {
    return <ProjectFilesSectionSkeleton />
  }

  if (error) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
          <AlertCircle className="h-12 w-12 text-destructive/50" />
          <p className="mt-2 font-medium text-destructive">Failed to load files</p>
          <p className="text-sm text-muted-foreground">
            {error.message || 'An error occurred while loading project files'}
          </p>
        </CardContent>
      </Card>
    )
  }

  if (!groupedFiles || groupedFiles.length === 0) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
          <FileX className="h-12 w-12 text-muted-foreground/50" />
          <p className="mt-2 font-medium">No files available</p>
          <p className="text-sm text-muted-foreground">
            This project has no files uploaded yet
          </p>
        </CardContent>
      </Card>
    )
  }

  // Flatten all files from all stage groups for FileViewer
  const allFiles = groupedFiles.flatMap((group) => group.files)

  return (
    <div className="space-y-4">
      {groupedFiles.map((group) => (
        <div key={group.stageId || 'general'} className="space-y-2">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">
              {group.stageName}
            </h3>
            <div className="flex-1 h-px bg-border" />
          </div>
          <FileViewer files={group.files} />
        </div>
      ))}
    </div>
  )
}

function ProjectFilesSectionSkeleton() {
  return (
    <Card>
      <CardHeader>
        <Skeleton className="h-5 w-28" />
      </CardHeader>
      <CardContent className="space-y-3">
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex items-center gap-3 rounded-lg border p-3">
            <Skeleton className="h-10 w-10 rounded-lg" />
            <div className="flex-1 space-y-2">
              <Skeleton className="h-4 w-48" />
              <Skeleton className="h-3 w-24" />
            </div>
            <Skeleton className="h-9 w-20" />
          </div>
        ))}
      </CardContent>
    </Card>
  )
}