'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 { formatDate } from '@/lib/utils'

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

interface PriceAdjustmentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  data: PriceAdjustmentData | null
  vendorName: string
}

export function PriceAdjustmentDialog({
  open,
  onOpenChange,
  data,
  vendorName,
}: PriceAdjustmentDialogProps) {
  if (!data) return null

  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>
          </DialogTitle>
          <DialogDescription>
            협력업체가 제출한 연동제 적용 정보입니다.
          </DialogDescription>
        </DialogHeader>

        <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>
                <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">
              <div>
                <label className="text-xs text-gray-500">연동대상 주요 원재료</label>
                <p className="text-sm font-medium whitespace-pre-wrap">
                  {data.majorApplicableRawMaterial || '-'}
                </p>
              </div>
              <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>

          <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 ? formatDate(data.referenceDate, "kr") : '-'}</p>
                </div>
                <div>
                  <label className="text-xs text-gray-500">원재료 기준 가격의 변동률 산정을 위한 비교시점</label>
                  <p className="text-sm font-medium">{data.comparisonDate ? formatDate(data.comparisonDate, "kr") : '-'}</p>
                </div>
              </div>
              <div>
                <label className="text-xs text-gray-500">반영비율</label>
                <p className="text-sm font-medium">
                  {data.adjustmentRatio ? `${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 ? formatDate(data.adjustmentDate, "kr") : '-'}</p>
                </div>
              </div>
              <div>
                <label className="text-xs text-gray-500">수탁기업(협력사)작성자</label>
                <p className="text-sm font-medium">{data.contractorWriter || '-'}</p>
              </div>
              <div>
                <label className="text-xs text-gray-500">기타사항</label>
                <p className="text-sm font-medium whitespace-pre-wrap">
                  {data.notes || '-'}
                </p>
              </div>
            </div>
          </div>

          <Separator />

          {/* 메타 정보 */}
          <div className="text-xs text-gray-500 space-y-1">
            <p>작성일: {formatDate(data.createdAt, "kr")}</p>
            <p>수정일: {formatDate(data.updatedAt, "kr")}</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>
  )
}