'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'

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 PriceAdjustmentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  data: PriceAdjustmentData | null
  vendorName: string
}

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

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

  // 연동제 적용 여부 판단 (majorApplicableRawMaterial이 있으면 적용, majorNonApplicableRawMaterial이 있으면 미적용)
  const isApplied = !!data.majorApplicableRawMaterial
  const isNotApplied = !!data.majorNonApplicableRawMaterial

  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>
            )}
          </DialogTitle>
          <DialogDescription>
            협력업체가 제출한 연동제 적용 정보입니다.
            {isApplied && " (연동제 적용)"}
            {isNotApplied && " (연동제 미적용)"}
          </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>
                <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>
                  )}
                  {!isApplied && !isNotApplied && (
                    <span className="text-sm text-muted-foreground">-</span>
                  )}
                </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 && (
            <>
              <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 && (
            <>
              <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>
            </>
          )}

          <Separator />

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