path: root/lib/bidding/vendor/components/pr-items-pricing-table.tsx

'use client'

import * as React from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

import { Badge } from '@/components/ui/badge'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Package,

  Download,
  Calculator
} from 'lucide-react'
import { formatDate } from '@/lib/utils'
import { downloadFile, formatFileSize, getFileInfo } from '@/lib/file-download'
import { getSpecDocumentsForPrItem } from '../../pre-quote/service'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

interface PrItem {
  id: number
  itemNumber: string | null
  prNumber: string | null
  itemInfo: string | null
  materialDescription: string | null
  quantity: string | null
  quantityUnit: string | null
  totalWeight: string | null
  weightUnit: string | null
  currency: string | null
  requestedDeliveryDate: string | null
  hasSpecDocument: boolean | null
}

interface PrItemQuotation {
  prItemId: number
  bidUnitPrice: number
  bidAmount: number
  proposedDeliveryDate?: string
  technicalSpecification?: string
}

interface SpecDocument {
  id: number
  fileName: string
  originalFileName: string
  fileSize: number | null
  filePath: string
  title: string | null
  description: string | null
  uploadedAt: string
}

// 파일 다운로드 훅
const useFileDownload = () => {
  const [downloadingFiles, setDownloadingFiles] = React.useState<Set<string>>(new Set())

  const handleDownload = async (filePath: string, fileName: string, options?: { 
    action?: 'download' | 'preview' 
  }) => {
    const fileKey = `${filePath}_${fileName}`
    if (downloadingFiles.has(fileKey)) return
    
    setDownloadingFiles(prev => new Set(prev).add(fileKey))
    
    try {
      await downloadFile(filePath, fileName, {
        action: options?.action || 'download',
        showToast: true,
        showSuccessToast: true,
        onError: (error) => {
          console.error("파일 다운로드 실패:", error)
        },
        onSuccess: (fileName, fileSize) => {
          console.log("파일 다운로드 성공:", fileName, fileSize ? formatFileSize(fileSize) : '')
        }
      })
    } catch (error) {
      console.error("다운로드 처리 중 오류:", error)
    } finally {
      setDownloadingFiles(prev => {
        const newSet = new Set(prev)
        newSet.delete(fileKey)
        return newSet
      })
    }
  }

  return { handleDownload, downloadingFiles }
}

// 파일 다운로드 링크 컴포넌트
interface FileDownloadLinkProps {
  filePath: string
  fileName: string
  fileSize?: number | null
  title?: string | null
  className?: string
}

const FileDownloadLink: React.FC<FileDownloadLinkProps> = ({
  filePath,
  fileName,
  fileSize,
  title,
  className = ""
}) => {
  const { handleDownload, downloadingFiles } = useFileDownload()
  const fileInfo = getFileInfo(fileName)
  const fileKey = `${filePath}_${fileName}`
  const isDownloading = downloadingFiles.has(fileKey)

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            onClick={() => handleDownload(filePath, fileName)}
            disabled={isDownloading}
            className={`inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800 hover:underline disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
          >
            <span className="text-xs">{fileInfo.icon}</span>
            <span className="truncate max-w-[150px]">
              {isDownloading ? "다운로드 중..." : (title || fileName)}
            </span>
            <Download className="h-3 w-3 opacity-60" />
          </button>
        </TooltipTrigger>
        <TooltipContent>
          <div className="text-xs">
            <div className="font-medium">{fileName}</div>
            {fileSize && <div className="text-muted-foreground">{formatFileSize(fileSize)}</div>}
            <div className="text-muted-foreground">클릭하여 다운로드</div>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

interface PrItemsPricingTableProps {
  prItems: PrItem[]
  initialQuotations?: PrItemQuotation[]
  currency?: string
  onQuotationsChange: (quotations: PrItemQuotation[]) => void
  onTotalAmountChange: (total: number) => void
  readOnly?: boolean
}

export function PrItemsPricingTable({
  prItems,
  initialQuotations = [],
  currency = 'KRW',
  onQuotationsChange,
  onTotalAmountChange,
  readOnly = false
}: PrItemsPricingTableProps) {
  const [quotations, setQuotations] = React.useState<PrItemQuotation[]>([])
  const [specDocuments, setSpecDocuments] = React.useState<Record<number, SpecDocument[]>>({})

  // 초기 견적 데이터 설정 및 SPEC 문서 로드
  React.useEffect(() => {
    const initQuotations = prItems.map(item => {
      const existing = initialQuotations.find(q => q.prItemId === item.id)
      if (existing) {
        return existing
      }
      return {
        prItemId: item.id,
        bidUnitPrice: 0,
        bidAmount: 0,
        proposedDeliveryDate: '',
        technicalSpecification: ''
      }
    })
    setQuotations(initQuotations)

    // SPEC 문서가 있는 모든 PR 아이템의 문서를 미리 로드
    const loadAllSpecDocuments = async () => {
      const itemsWithSpecs = prItems.filter(item => item.hasSpecDocument)
      console.log('Loading spec documents for items:', itemsWithSpecs.map(item => ({ id: item.id, itemNumber: item.itemNumber })))
      
      for (const item of itemsWithSpecs) {
        try {
          console.log('Loading spec documents for prItemId:', item.id)
          const docs = await getSpecDocumentsForPrItem(item.id)
          console.log('Loaded spec documents for item', item.id, ':', docs)
          
          // Date를 string으로 변환
          const mappedDocs = docs.map(doc => ({
            ...doc,
            uploadedAt: doc.uploadedAt.toString()
          }))
          
          setSpecDocuments(prev => ({ ...prev, [item.id]: mappedDocs }))
        } catch (error) {
          console.error('Failed to load spec documents for item', item.id, ':', error)
        }
      }
    }

    loadAllSpecDocuments()
  }, [prItems, initialQuotations])


  // 견적 데이터 업데이트
  const updateQuotation = (prItemId: number, field: keyof PrItemQuotation, value: any) => {
    const updatedQuotations = quotations.map(q => {
      if (q.prItemId === prItemId) {
        const updated = { ...q, [field]: value }
        
        // 단가가 변경되면 금액 자동 계산 (수량 우선, 없으면 중량 사용)
        if (field === 'bidUnitPrice') {
          const prItem = prItems.find(item => item.id === prItemId)
          let multiplier = 1
          
          if (prItem?.quantity && parseFloat(prItem.quantity) > 0) {
            // 수량이 있으면 수량 기준
            multiplier = parseFloat(prItem.quantity)
          } else if (prItem?.totalWeight && parseFloat(prItem.totalWeight) > 0) {
            // 수량이 없으면 중량 기준
            multiplier = parseFloat(prItem.totalWeight)
          }
          
          updated.bidAmount = updated.bidUnitPrice * multiplier
        }
        
        return updated
      }
      return q
    })
    
    setQuotations(updatedQuotations)
    onQuotationsChange(updatedQuotations)
    
    // 총 금액 계산
    const totalAmount = updatedQuotations.reduce((sum, q) => sum + q.bidAmount, 0)
    onTotalAmountChange(totalAmount)
  }


  // 통화 포맷팅
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('ko-KR', {
      style: 'currency',
      currency: currency,
    }).format(amount)
  }

  // 총 금액 계산
  const totalAmount = quotations.reduce((sum, q) => sum + q.bidAmount, 0)

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Package className="w-5 h-5" />
          품목별 견적 작성
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>아이템번호</TableHead>
                  <TableHead>PR번호</TableHead>
                  <TableHead>품목정보</TableHead>
                  <TableHead>자재내역</TableHead>
                  <TableHead>수량</TableHead>
                  <TableHead>단위</TableHead>
                  <TableHead>중량</TableHead>
                  <TableHead>중량단위</TableHead>
                  <TableHead>SHI 납품요청일</TableHead>
                  <TableHead>견적단가</TableHead>
                  <TableHead>견적금액</TableHead>
                  <TableHead>납품예정일</TableHead>
                  {/* <TableHead>기술사양</TableHead> */}
                  <TableHead>SPEC</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {prItems.map((item) => {
                  const quotation = quotations.find(q => q.prItemId === item.id) || {
                    prItemId: item.id,
                    bidUnitPrice: 0,
                    bidAmount: 0,
                    proposedDeliveryDate: '',
                    technicalSpecification: ''
                  }
                  
                  return (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">
                        {item.itemNumber || '-'}
                      </TableCell>
                      <TableCell>{item.prNumber || '-'}</TableCell>
                      <TableCell>
                        <div className="max-w-32 truncate" title={item.itemInfo || ''}>
                          {item.itemInfo || '-'}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="max-w-32 truncate" title={item.materialDescription || ''}>
                          {item.materialDescription || '-'}
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
                        {item.quantity ? parseFloat(item.quantity).toLocaleString() : '-'}
                      </TableCell>
                      <TableCell>{item.quantityUnit || '-'}</TableCell>
                      <TableCell className="text-right">
                        {item.totalWeight ? parseFloat(item.totalWeight).toLocaleString() : '-'}
                      </TableCell>
                      <TableCell>{item.weightUnit || '-'}</TableCell>
                      <TableCell>
                        {item.requestedDeliveryDate ? 
                          formatDate(item.requestedDeliveryDate, 'KR') : '-'
                        }
                      </TableCell>
                      <TableCell>
                        {readOnly ? (
                          <span className="font-medium">
                            {quotation.bidUnitPrice.toLocaleString()}
                          </span>
                        ) : (
                          <Input
                            type="number"
                            value={quotation.bidUnitPrice}
                            onChange={(e) => updateQuotation(
                              item.id,
                              'bidUnitPrice',
                              parseFloat(e.target.value) || 0
                            )}
                            className="w-32 text-right"
                            placeholder="단가"
                          />
                        )}
                      </TableCell>
                      <TableCell>
                        <div className="font-semibold text-primary">
                          {formatCurrency(quotation.bidAmount)}
                        </div>
                      </TableCell>
                      <TableCell>
                        {readOnly ? (
                          quotation.proposedDeliveryDate ? 
                            formatDate(quotation.proposedDeliveryDate, 'KR') : '-'
                        ) : (
                          <Input
                            type="date"
                            value={quotation.proposedDeliveryDate}
                            onChange={(e) => updateQuotation(
                              item.id,
                              'proposedDeliveryDate',
                              e.target.value
                            )}
                            className="w-40"
                          />
                        )}
                      </TableCell>
                      {/* <TableCell>
                        {readOnly ? (
                          <div className="max-w-32 truncate" title={quotation.technicalSpecification || ''}>
                            {quotation.technicalSpecification || '-'}
                          </div>
                        ) : (
                          <Textarea
                            value={quotation.technicalSpecification}
                            onChange={(e) => updateQuotation(
                              item.id,
                              'technicalSpecification',
                              e.target.value
                            )}
                            placeholder="기술사양 입력"
                            className="w-48 min-h-[60px]"
                            rows={2}
                          />
                        )}
                      </TableCell> */}
                      <TableCell>
                        {item.hasSpecDocument ? (
                          <div className="space-y-1">
                            {specDocuments[item.id] && specDocuments[item.id].length > 0 ? (
                              <div className="space-y-1">
                                {specDocuments[item.id].map((doc) => (
                                  <div key={doc.id} className="text-xs">
                                    <FileDownloadLink
                                      filePath={doc.filePath}
                                      fileName={doc.originalFileName}
                                      fileSize={doc.fileSize}
                                      title={doc.title}
                                      className="text-xs"
                                    />
                                  </div>
                                ))}
                              </div>
                            ) : (
                              <div className="flex items-center gap-2">
                                <Badge variant="secondary">문서 없음</Badge>
                                <span className="text-xs text-muted-foreground">로딩 중...</span>
                              </div>
                            )}
                          </div>
                        ) : (
                          <Badge variant="outline">SPEC 없음</Badge>
                        )}
                      </TableCell>
                    </TableRow>
                  )
                })}
              </TableBody>
            </Table>
          </div>

          {/* 총 금액 표시 */}
          <div className="flex justify-end">
            <Card className="w-80">
              <CardContent className="pt-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Calculator className="w-4 h-4" />
                    <Label className="font-semibold">총 사전견적 금액</Label>
                  </div>
                  <div className="text-2xl font-bold text-primary">
                    {formatCurrency(totalAmount)}
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}