sam-react-prod/src/components/pricing/PricingHistoryDialog.tsx

/**
 * 단가 이력 조회 다이얼로그
 */

'use client';

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';
import { getPresetStyle } from '@/lib/utils/status-config';
import { Separator } from '@/components/ui/separator';
import { History } from 'lucide-react';
import type { PricingData } from './types';

interface PricingHistoryDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  pricingData?: PricingData | null;
}

export function PricingHistoryDialog({
  open,
  onOpenChange,
  pricingData,
}: PricingHistoryDialogProps) {
  if (!pricingData) return null;

  const hasRevisions = pricingData.revisions && pricingData.revisions.length > 0;

  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">
            <History className="h-5 w-5" />
            단가 수정 이력
          </DialogTitle>
          <DialogDescription>
            {pricingData.itemName} ({pricingData.itemCode})의 단가 변경 이력입니다.
          </DialogDescription>
        </DialogHeader>

        {hasRevisions ? (
          <div className="space-y-4">
            {/* 현재 버전 */}
            <div className="border-2 border-blue-200 rounded-lg p-4 bg-blue-50">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <Badge className={getPresetStyle('info')}>현재 버전</Badge>
                  <span className="font-semibold">
                    수정 {pricingData.currentRevision}차
                  </span>
                </div>
                <span className="text-sm text-muted-foreground">
                  {new Date(
                    pricingData.updatedAt || pricingData.createdAt
                  ).toLocaleString('ko-KR')}
                </span>
              </div>
              <div className="grid grid-cols-4 gap-3 text-sm">
                <div>
                  <span className="text-muted-foreground">매입단가:</span>
                  <div className="font-semibold">
                    {pricingData.purchasePrice?.toLocaleString() || '-'}원
                  </div>
                </div>
                <div>
                  <span className="text-muted-foreground">가공비:</span>
                  <div className="font-semibold">
                    {pricingData.processingCost?.toLocaleString() || '-'}원
                  </div>
                </div>
                <div>
                  <span className="text-muted-foreground">판매단가:</span>
                  <div className="font-semibold">
                    {pricingData.salesPrice?.toLocaleString() || '-'}원
                  </div>
                </div>
                <div>
                  <span className="text-muted-foreground">마진율:</span>
                  <div className="font-semibold">
                    {pricingData.marginRate?.toFixed(1) || '-'}%
                  </div>
                </div>
              </div>
            </div>

            {/* 이전 버전들 */}
            {[...pricingData.revisions!].reverse().map((revision) => (
              <div key={revision.revisionNumber} className="border rounded-lg p-4">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-2">
                    <Badge variant="outline">이전 버전</Badge>
                    <span className="font-semibold">
                      수정 {revision.revisionNumber}차
                    </span>
                    {revision.revisionReason && (
                      <span className="text-sm text-muted-foreground">
                        ({revision.revisionReason})
                      </span>
                    )}
                  </div>
                  <div className="text-right">
                    <div className="text-sm text-muted-foreground">
                      {new Date(revision.revisionDate).toLocaleString('ko-KR')}
                    </div>
                    <div className="text-xs text-muted-foreground">
                      by {revision.revisionBy}
                    </div>
                  </div>
                </div>
                <div className="grid grid-cols-4 gap-3 text-sm">
                  <div>
                    <span className="text-muted-foreground">매입단가:</span>
                    <div>
                      {revision.previousData?.purchasePrice?.toLocaleString() || '-'}원
                    </div>
                  </div>
                  <div>
                    <span className="text-muted-foreground">가공비:</span>
                    <div>
                      {revision.previousData?.processingCost?.toLocaleString() || '-'}원
                    </div>
                  </div>
                  <div>
                    <span className="text-muted-foreground">판매단가:</span>
                    <div>
                      {revision.previousData?.salesPrice?.toLocaleString() || '-'}원
                    </div>
                  </div>
                  <div>
                    <span className="text-muted-foreground">마진율:</span>
                    <div>
                      {revision.previousData?.marginRate?.toFixed(1) || '-'}%
                    </div>
                  </div>
                </div>
              </div>
            ))}

            {/* 최초 버전 */}
            <div className="border rounded-lg p-4 bg-gray-50">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <Badge variant="outline">최초 버전</Badge>
                  <span className="font-semibold">초기 등록</span>
                </div>
                <span className="text-sm text-muted-foreground">
                  {new Date(pricingData.createdAt).toLocaleString('ko-KR')}
                </span>
              </div>
            </div>
          </div>
        ) : (
          <div className="text-center py-8 text-muted-foreground">
            수정 이력이 없습니다.
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}

export default PricingHistoryDialog;