sam-react-prod/src/components/items/ItemDetailClient.tsx

/**
 * 품목 상세 조회 Client Component
 *
 * 품목 정보를 읽기 전용으로 표시
 */

'use client';

import { useRouter } from 'next/navigation';
import type { ItemMaster } from '@/types/item';
import { ITEM_TYPE_LABELS, PART_TYPE_LABELS, PART_USAGE_LABELS, PRODUCT_CATEGORY_LABELS } from '@/types/item';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Label } from '@/components/ui/label';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { ArrowLeft, Edit, Package } from 'lucide-react';

interface ItemDetailClientProps {
  item: ItemMaster;
}

/**
 * 품목 유형별 Badge 반환
 */
function getItemTypeBadge(itemType: string) {
  const badges: Record<string, { className: string }> = {
    FG: { className: 'bg-purple-50 text-purple-700 border-purple-200' },
    PT: { className: 'bg-orange-50 text-orange-700 border-orange-200' },
    SM: { className: 'bg-green-50 text-green-700 border-green-200' },
    RM: { className: 'bg-blue-50 text-blue-700 border-blue-200' },
    CS: { className: 'bg-gray-50 text-gray-700 border-gray-200' },
  };

  const config = badges[itemType] || { className: '' };

  return (
    <Badge variant="outline" className={config.className}>
      {ITEM_TYPE_LABELS[itemType as keyof typeof ITEM_TYPE_LABELS]}
    </Badge>
  );
}

/**
 * 조립품 품목코드 포맷팅 (하이픈 이후 제거)
 */
function formatItemCodeForAssembly(item: ItemMaster): string {
  return item.itemCode;
}

export default function ItemDetailClient({ item }: ItemDetailClientProps) {
  const router = useRouter();

  return (
    <div className="space-y-6">
      {/* 헤더 */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="flex items-start gap-3">
          <div className="p-2 bg-primary/10 rounded-lg hidden md:block">
            <Package className="w-6 h-6 text-primary" />
          </div>
          <div>
            <h1 className="text-xl md:text-2xl">품목 상세 정보</h1>
            <p className="text-sm text-muted-foreground mt-1">
              등록된 품목 정보를 확인합니다
            </p>
          </div>
        </div>

        <div className="flex gap-2">
          <Button
            type="button"
            variant="outline"
            onClick={() => router.back()}
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            목록으로
          </Button>
          <Button
            type="button"
            onClick={() => router.push(`/items/${encodeURIComponent(item.itemCode)}/edit?type=${item.itemType}&id=${item.id}`)}
          >
            <Edit className="w-4 h-4 mr-2" />
            수정
          </Button>
        </div>
      </div>

      {/* 기본 정보 */}
      <Card>
        <CardHeader>
          <CardTitle>기본 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div>
              <Label className="text-muted-foreground">품목코드</Label>
              <p className="mt-1">
                <code className="text-sm bg-gray-100 px-2 py-1 rounded">
                  {formatItemCodeForAssembly(item)}
                </code>
              </p>
            </div>
            <div>
              <Label className="text-muted-foreground">품목명</Label>
              <p className="mt-1 font-medium">{item.itemName}</p>
            </div>
            <div>
              <Label className="text-muted-foreground">품목유형</Label>
              <p className="mt-1">{getItemTypeBadge(item.itemType)}</p>
            </div>

            {item.itemType === "PT" && item.partType && (
              <div>
                <Label className="text-muted-foreground">부품 유형</Label>
                <p className="mt-1">
                  <Badge variant="outline" className={
                    item.partType === 'ASSEMBLY' ? 'bg-blue-50 text-blue-700' :
                    item.partType === 'BENDING' ? 'bg-purple-50 text-purple-700' :
                    item.partType === 'PURCHASED' ? 'bg-green-50 text-green-700' :
                    'bg-gray-50 text-gray-700'
                  }>
                    {item.partType === 'ASSEMBLY' ? '조립 부품' :
                     item.partType === 'BENDING' ? '절곡 부품' :
                     item.partType === 'PURCHASED' ? '구매 부품' :
                     item.partType}
                  </Badge>
                </p>
              </div>
            )}

            {item.itemType === "PT" && item.partType === "BENDING" && item.partUsage && (
              <div>
                <Label className="text-muted-foreground">용도</Label>
                <p className="mt-1">
                  <Badge variant="outline" className="bg-indigo-50 text-indigo-700">
                    {item.partUsage === "GUIDE_RAIL" ? "가이드레일용" :
                     item.partUsage === "BOTTOM_FINISH" ? "하단마감재용" :
                     item.partUsage === "CASE" ? "케이스용" :
                     item.partUsage === "DOOR" ? "도어용" :
                     item.partUsage === "BRACKET" ? "브라켓용" :
                     item.partUsage === "GENERAL" ? "범용 (공통 부품)" :
                     item.partUsage}
                  </Badge>
                </p>
              </div>
            )}

            {item.itemType !== "FG" && item.partType !== 'ASSEMBLY' && item.specification && (
              <div>
                <Label className="text-muted-foreground">규격</Label>
                <p className="mt-1">{item.specification}</p>
              </div>
            )}

            {item.itemType !== "FG" && (
              <div>
                <Label className="text-muted-foreground">단위</Label>
                <p className="mt-1">
                  <Badge variant="secondary">{item.unit}</Badge>
                </p>
              </div>
            )}

            {/* 버전 정보 */}
            <div className="md:col-span-2 lg:col-span-3 pt-4 border-t">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <Label className="text-muted-foreground">현재 버전</Label>
                  <div className="mt-1">
                    <Badge variant="secondary">V{item.currentRevision || 0}</Badge>
                  </div>
                </div>
                <div>
                  <Label className="text-muted-foreground">수정 횟수</Label>
                  <p className="mt-1">{(item.revisions?.length || 0)}회</p>
                </div>
              </div>
            </div>

            <div>
              <Label className="text-muted-foreground">등록일</Label>
              <p className="mt-1 text-sm">{new Date(item.createdAt).toLocaleDateString('ko-KR')}</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 제품(FG) 전용 정보 */}
      {item.itemType === 'FG' && (
        <Card>
          <CardHeader>
            <CardTitle>제품 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {item.productCategory && (
                <div>
                  <Label className="text-muted-foreground">제품 카테고리</Label>
                  <p className="mt-1 font-medium">{PRODUCT_CATEGORY_LABELS[item.productCategory]}</p>
                </div>
              )}
              {item.lotAbbreviation && (
                <div>
                  <Label className="text-muted-foreground">로트 약자</Label>
                  <p className="mt-1 font-medium">{item.lotAbbreviation}</p>
                </div>
              )}
            </div>
            {item.note && (
              <div className="mt-4">
                <Label className="text-muted-foreground">비고</Label>
                <p className="mt-1 text-sm whitespace-pre-wrap">{item.note}</p>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* 조립 부품 세부 정보 */}
      {item.itemType === 'PT' && item.partType === 'ASSEMBLY' && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Package className="h-5 w-5" />
              조립 부품 세부 정보
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {item.category1 && (
                <div>
                  <Label className="text-muted-foreground">품목명</Label>
                  <p className="mt-1">
                    <Badge variant="outline" className="bg-indigo-50 text-indigo-700">
                      {item.category1 === 'guide_rail' ? '가이드레일' :
                       item.category1 === 'case' ? '케이스' :
                       item.category1 === 'bottom_finish' ? '하단마감재' :
                       item.category1}
                    </Badge>
                  </p>
                </div>
              )}
              {item.installationType && (
                <div>
                  <Label className="text-muted-foreground">설치 유형</Label>
                  <p className="mt-1">
                    <Badge variant="outline" className="bg-green-50 text-green-700">
                      {item.installationType === 'wall' ? '벽면형 (R)' :
                       item.installationType === 'side' ? '측면형 (S)' :
                       item.installationType === 'steel' ? '스틸 (B)' :
                       item.installationType === 'iron' ? '철재 (T)' :
                       item.installationType}
                    </Badge>
                  </p>
                </div>
              )}
              {item.assemblyType && (
                <div>
                  <Label className="text-muted-foreground">마감</Label>
                  <p className="mt-1">
                    <code className="text-sm bg-gray-100 px-2 py-1 rounded">
                      {item.assemblyType}
                    </code>
                  </p>
                </div>
              )}
              {item.material && (
                <div>
                  <Label className="text-muted-foreground">재질</Label>
                  <p className="mt-1">
                    <Badge variant="outline" className="bg-indigo-50 text-indigo-700">
                      {item.material}
                    </Badge>
                  </p>
                </div>
              )}
              {item.assemblyLength && (
                <div>
                  <Label className="text-muted-foreground">길이</Label>
                  <p className="mt-1 font-medium">{item.assemblyLength}mm</p>
                </div>
              )}
              {item.sideSpecWidth && item.sideSpecHeight && (
                <div>
                  <Label className="text-muted-foreground">측면 규격</Label>
                  <p className="mt-1">
                    {item.sideSpecWidth} × {item.sideSpecHeight}mm
                  </p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 가이드레일 세부 정보 */}
      {item.category3 === "가이드레일" && item.guideRailModelType && (
        <Card>
          <CardHeader>
            <CardTitle>가이드레일 세부 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {item.guideRailModelType && (
                <div>
                  <Label className="text-muted-foreground">모델유형</Label>
                  <p className="mt-1">
                    <Badge variant="outline" className="bg-orange-50 text-orange-700">
                      {item.guideRailModelType}
                    </Badge>
                  </p>
                </div>
              )}
              {item.guideRailModel && (
                <div>
                  <Label className="text-muted-foreground">모델선택</Label>
                  <p className="mt-1">
                    <Badge variant="outline" className="bg-orange-50 text-orange-700">
                      {item.guideRailModel}
                    </Badge>
                  </p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}

      {/* BOM 정보 - 절곡 부품은 제외 */}
      {(item.itemType === 'FG' || (item.itemType === 'PT' && item.partType !== 'BENDING')) && item.bom && item.bom.length > 0 && (
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <Package className="h-5 w-5" />
                부품 구성 (BOM)
              </CardTitle>
              <Badge variant="outline" className="bg-blue-50 text-blue-700">
                총 {item.bom.length}개 품목
              </Badge>
            </div>
          </CardHeader>
          <CardContent>
            <div className="border rounded-lg overflow-hidden">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>번호</TableHead>
                    <TableHead>품목코드</TableHead>
                    <TableHead>품목명</TableHead>
                    <TableHead className="text-right">수량</TableHead>
                    <TableHead>단위</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {item.bom.map((line, index) => (
                    <TableRow key={line.id}>
                      <TableCell>{index + 1}</TableCell>
                      <TableCell>
                        <code className="text-xs bg-gray-100 px-2 py-1 rounded">
                          {line.childItemCode}
                        </code>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          {line.childItemName}
                          {line.isBending && (
                            <Badge variant="outline" className="text-xs bg-purple-50 text-purple-700">
                              절곡품
                            </Badge>
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="text-right">{line.quantity}</TableCell>
                      <TableCell>{line.unit}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}