"use client"

import * as React from "react"
import { Download, FileText } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"

interface PosFileInfo {
  fileName: string
  dcmtmId: string
  projNo: string
  posNo: string
  posRevNo: string
  fileSer: string
}

interface PosFileSelectionDialogProps {
  isOpen: boolean
  onClose: () => void
  materialCode: string
  files: PosFileInfo[]
  onDownload: (fileIndex: number, fileName: string) => void
  downloadingIndex: number | null
}

export function PosFileSelectionDialog({
  isOpen,
  onClose,
  materialCode,
  files,
  onDownload,
  downloadingIndex,
}: PosFileSelectionDialogProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5 text-green-600" />
            POS 파일 선택
          </DialogTitle>
          <DialogDescription>
            자재코드 <Badge variant="outline" className="font-mono">{materialCode}</Badge>에 대한 
            POS 파일 <Badge variant="secondary">{files.length}개</Badge>가 있습니다. 
            다운로드할 파일을 선택해주세요.
          </DialogDescription>
        </DialogHeader>

        <ScrollArea className="max-h-[60vh]">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[50px]">번호</TableHead>
                <TableHead>파일명</TableHead>
                <TableHead className="w-[120px]">프로젝트</TableHead>
                <TableHead className="w-[150px]">POS 번호</TableHead>
                <TableHead className="w-[80px]">리비전</TableHead>
                <TableHead className="w-[80px]">파일 SEQ</TableHead>
                <TableHead className="w-[120px] text-center">다운로드</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {files.map((file, index) => (
                <TableRow key={`${file.dcmtmId}-${index}`}>
                  <TableCell className="text-center font-mono text-sm">
                    #{index + 1}
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <FileText className="h-4 w-4 text-blue-500 flex-shrink-0" />
                      <span className="text-sm font-medium truncate" title={file.fileName}>
                        {file.fileName}
                      </span>
                    </div>
                  </TableCell>
                  <TableCell>
                    <span className="text-xs font-mono">{file.projNo}</span>
                  </TableCell>
                  <TableCell>
                    <span className="text-xs font-mono">{file.posNo}</span>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline" className="text-xs">
                      {file.posRevNo}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <span className="text-xs font-mono">{file.fileSer}</span>
                  </TableCell>
                  <TableCell className="text-center">
                    <Button
                      size="sm"
                      variant="default"
                      onClick={() => onDownload(index, file.fileName)}
                      disabled={downloadingIndex !== null}
                      className="w-full"
                    >
                      <Download className="h-3 w-3 mr-1" />
                      {downloadingIndex === index ? '다운로드 중...' : '다운로드'}
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </ScrollArea>

        {files.length === 0 && (
          <div className="text-center py-8 text-muted-foreground">
            <FileText className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
            <p>사용 가능한 POS 파일이 없습니다.</p>
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}