'use client'

import React from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { format } from 'date-fns'
import { ko } from 'date-fns/locale'
import { Loader2 } from 'lucide-react'

interface PriceAdjustmentData {
  id: number
  itemName?: string | null
  adjustmentReflectionPoint?: string | null
  majorApplicableRawMaterial?: string | null
  adjustmentFormula?: string | null
  rawMaterialPriceIndex?: string | null
  referenceDate?: Date | string | null
  comparisonDate?: Date | string | null
  adjustmentRatio?: string | null
  notes?: string | null
  adjustmentConditions?: string | null
  majorNonApplicableRawMaterial?: string | null
  adjustmentPeriod?: string | null
  contractorWriter?: string | null
  adjustmentDate?: Date | string | null
  nonApplicableReason?: string | null
  createdAt: Date | string
  updatedAt: Date | string
}

interface VendorPriceAdjustmentViewDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  vendorName: string
  priceAdjustmentResponse: boolean | null // 벤더가 응답한 연동제 적용 여부
  biddingCompanyId: number
}

export function VendorPriceAdjustmentViewDialog({
  open,
  onOpenChange,
  vendorName,
  priceAdjustmentResponse,
  biddingCompanyId,
}: VendorPriceAdjustmentViewDialogProps) {
  const [data, setData] = React.useState<PriceAdjustmentData | null>(null)
  const [isLoading, setIsLoading] = React.useState(false)
  const [error, setError] = React.useState<string | null>(null)

  // 다이얼로그가 열릴 때 데이터 로드
  React.useEffect(() => {
    if (open && biddingCompanyId) {
      loadPriceAdjustmentData()
    }
  }, [open, biddingCompanyId])

  const loadPriceAdjustmentData = async () => {
    setIsLoading(true)
    setError(null)
    try {
      // 서버에서 연동제 폼 데이터 조회
      const { getPriceAdjustmentFormByBiddingCompanyId } = await import('@/lib/bidding/detail/service')
      const formData = await getPriceAdjustmentFormByBiddingCompanyId(biddingCompanyId)
      setData(formData)
    } catch (err) {
      console.error('Failed to load price adjustment data:', err)
      setError('연동제 정보를 불러오는데 실패했습니다.')
    } finally {
      setIsLoading(false)
    }
  }

  // 날짜 포맷팅 헬퍼
  const formatDateValue = (date: Date | string | null | undefined) => {
    if (!date) return '-'
    try {
      const dateObj = typeof date === 'string' ? new Date(date) : date
      return format(dateObj, 'yyyy-MM-dd', { locale: ko })
    } catch {
      return '-'
    }
  }

  // 연동제 적용 여부 판단
  const isApplied = priceAdjustmentResponse === true
  const isNotApplied = priceAdjustmentResponse === false

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <span>하도급대금등 연동표</span>
            <Badge variant="secondary">{vendorName}</Badge>
            {isApplied && (
              <Badge variant="default" className="bg-green-600 hover:bg-green-700">
                연동제 적용
              </Badge>
            )}
            {isNotApplied && (
              <Badge variant="outline" className="border-red-500 text-red-600">
                연동제 미적용
              </Badge>
            )}
            {priceAdjustmentResponse === null && (
              <Badge variant="outline">해당없음</Badge>
            )}
          </DialogTitle>
          <DialogDescription>
            협력업체가 제출한 연동제 적용 정보입니다.
            {isApplied && " (연동제 적용)"}
            {isNotApplied && " (연동제 미적용)"}
          </DialogDescription>
        </DialogHeader>

        {isLoading ? (
          <div className="flex items-center justify-center py-12">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            <span className="ml-2 text-muted-foreground">연동제 정보를 불러오는 중...</span>
          </div>
        ) : error ? (
          <div className="py-8 text-center text-red-600">{error}</div>
        ) : !data && priceAdjustmentResponse !== null ? (
          <div className="py-8 text-center text-muted-foreground">연동제 상세 정보가 없습니다.</div>
        ) : priceAdjustmentResponse === null ? (
          <div className="py-8 text-center text-muted-foreground">해당 업체는 연동제 관련 응답을 하지 않았습니다.</div>
        ) : (
          <div className="space-y-6">
            {/* 기본 정보 */}
            <div>
              <h3 className="text-sm font-medium text-gray-900 mb-3">기본 정보</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-xs text-gray-500">물품등의 명칭</label>
                  <p className="text-sm font-medium">{data?.itemName || '-'}</p>
                </div>
                <div>
                  <label className="text-xs text-gray-500">연동제 적용 여부</label>
                  <div className="mt-1">
                    {isApplied && (
                      <Badge variant="default" className="bg-green-600 hover:bg-green-700">
                        예 (연동제 적용)
                      </Badge>
                    )}
                    {isNotApplied && (
                      <Badge variant="outline" className="border-red-500 text-red-600">
                        아니오 (연동제 미적용)
                      </Badge>
                    )}
                  </div>
                </div>
                {isApplied && (
                  <div>
                    <label className="text-xs text-gray-500">조정대금 반영시점</label>
                    <p className="text-sm font-medium">{data?.adjustmentReflectionPoint || '-'}</p>
                  </div>
                )}
              </div>
            </div>

            <Separator />

            {/* 원재료 정보 */}
            <div>
              <h3 className="text-sm font-medium text-gray-900 mb-3">원재료 정보</h3>
              <div className="space-y-4">
                {isApplied && (
                  <div>
                    <label className="text-xs text-gray-500">연동대상 주요 원재료</label>
                    <p className="text-sm font-medium whitespace-pre-wrap">
                      {data?.majorApplicableRawMaterial || '-'}
                    </p>
                  </div>
                )}
                {isNotApplied && (
                  <>
                    <div>
                      <label className="text-xs text-gray-500">연동 미적용 주요 원재료</label>
                      <p className="text-sm font-medium whitespace-pre-wrap">
                        {data?.majorNonApplicableRawMaterial || '-'}
                      </p>
                    </div>
                    <div>
                      <label className="text-xs text-gray-500">연동 미적용 사유</label>
                      <p className="text-sm font-medium whitespace-pre-wrap">
                        {data?.nonApplicableReason || '-'}
                      </p>
                    </div>
                  </>
                )}
              </div>
            </div>

            {isApplied && data && (
              <>
                <Separator />

                {/* 연동 공식 및 지표 */}
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-3">연동 공식 및 지표</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="text-xs text-gray-500">하도급대금등 연동 산식</label>
                      <div className="p-3 bg-gray-50 rounded-md">
                        <p className="text-sm font-mono whitespace-pre-wrap">
                          {data.adjustmentFormula || '-'}
                        </p>
                      </div>
                    </div>
                    <div>
                      <label className="text-xs text-gray-500">원재료 가격 기준지표</label>
                      <p className="text-sm font-medium whitespace-pre-wrap">
                        {data.rawMaterialPriceIndex || '-'}
                      </p>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="text-xs text-gray-500">원재료 기준 가격의 변동률 산정을 위한 기준시점</label>
                        <p className="text-sm font-medium">{data.referenceDate ? formatDateValue(data.referenceDate) : '-'}</p>
                      </div>
                      <div>
                        <label className="text-xs text-gray-500">원재료 기준 가격의 변동률 산정을 위한 비교시점</label>
                        <p className="text-sm font-medium">{data.comparisonDate ? formatDateValue(data.comparisonDate) : '-'}</p>
                      </div>
                    </div>
                    {data.adjustmentRatio && (
                      <div>
                        <label className="text-xs text-gray-500">반영비율</label>
                        <p className="text-sm font-medium">
                          {data.adjustmentRatio}%
                        </p>
                      </div>
                    )}
                  </div>
                </div>

                <Separator />

                {/* 조정 조건 및 기타 */}
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-3">조정 조건 및 기타</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="text-xs text-gray-500">조정요건</label>
                      <p className="text-sm font-medium whitespace-pre-wrap">
                        {data.adjustmentConditions || '-'}
                      </p>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="text-xs text-gray-500">조정주기</label>
                        <p className="text-sm font-medium">{data.adjustmentPeriod || '-'}</p>
                      </div>
                      <div>
                        <label className="text-xs text-gray-500">조정일</label>
                        <p className="text-sm font-medium">{data.adjustmentDate ? formatDateValue(data.adjustmentDate) : '-'}</p>
                      </div>
                    </div>
                    <div>
                      <label className="text-xs text-gray-500">수탁기업(협력사)작성자</label>
                      <p className="text-sm font-medium">{data.contractorWriter || '-'}</p>
                    </div>
                    {data.notes && (
                      <div>
                        <label className="text-xs text-gray-500">기타사항</label>
                        <p className="text-sm font-medium whitespace-pre-wrap">
                          {data.notes}
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              </>
            )}

            {isNotApplied && data && (
              <>
                <Separator />
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-3">작성자 정보</h3>
                  <div>
                    <label className="text-xs text-gray-500">수탁기업(협력사) 작성자</label>
                    <p className="text-sm font-medium">{data.contractorWriter || '-'}</p>
                  </div>
                </div>
              </>
            )}

            {data && (
              <>
                <Separator />

                {/* 메타 정보 */}
                <div className="text-xs text-gray-500 space-y-1">
                  <p>작성일: {formatDateValue(data.createdAt)}</p>
                  <p>수정일: {formatDateValue(data.updatedAt)}</p>
                </div>
              </>
            )}

            <Separator />

            {/* 참고 경고문 */}
            <div className="text-xs text-red-600 space-y-2 bg-red-50 p-3 rounded-md border border-red-200">
              <p className="font-medium">※ 참고사항</p>
              <div className="space-y-1">
                <p>• 납품대금의 10% 이상을 차지하는 주요 원재료가 있는 경우 모든 주요 원재료에 대해서 적용 또는 미적용에 대한 연동표를 작성해야 한다.</p>
                <p>• 납품대급연동표를 허위로 작성하거나 근거자료를 허위로 제출할 경우 본 계약이 체결되지 않을 수 있으며, 본 계약이 체결되었더라도 계약의 전부 또는 일부를 해제 또는 해지할 수 있다.</p>
              </div>
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}