'use client'

import { useState } from 'react'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ChevronDown, ChevronUp, FileText } from 'lucide-react'
import { ProjectFilesSection } from './project-files-section'

interface CollapsibleFilesSectionProps {
  projectId: string
  roundId: string
  fileCount: number
}

export function CollapsibleFilesSection({
  projectId,
  roundId,
  fileCount,
}: CollapsibleFilesSectionProps) {
  const [isExpanded, setIsExpanded] = useState(false)
  const [showFiles, setShowFiles] = useState(false)

  const handleToggle = () => {
    setIsExpanded(!isExpanded)
    // Lazy-load the files when expanding for the first time
    if (!isExpanded && !showFiles) {
      setShowFiles(true)
    }
  }

  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <FileText className="h-5 w-5 text-muted-foreground" />
            <h3 className="font-semibold text-lg">
              Project Documents ({fileCount})
            </h3>
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={handleToggle}
            aria-label={isExpanded ? 'Collapse documents' : 'Expand documents'}
            className="gap-1"
          >
            {isExpanded ? (
              <>
                <ChevronUp className="h-4 w-4" />
                <span className="text-sm">Hide</span>
              </>
            ) : (
              <>
                <ChevronDown className="h-4 w-4" />
                <span className="text-sm">Show</span>
              </>
            )}
          </Button>
        </div>
      </CardHeader>

      {isExpanded && (
        <CardContent className="pt-0">
          {showFiles ? (
            <ProjectFilesSection projectId={projectId} roundId={roundId} />
          ) : (
            <div className="py-4 text-center text-sm text-muted-foreground">
              Loading documents...
            </div>
          )}
        </CardContent>
      )}
    </Card>
  )
}
