// components/purchase-requests/items-dialog.tsx
"use client";

import * as React from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  TableFooter,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Package } from "lucide-react";

interface Item {
  id: string;
  itemCode: string;
  itemName: string;
  specification: string;
  quantity: number;
  unit: string;
  estimatedUnitPrice?: number;
  remarks?: string;
}

interface ItemsDialogProps {
  requestId: number;
  requestCode: string;
  items: Item[] | any;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function ItemsDialog({
  requestId,
  requestCode,
  items,
  open,
  onOpenChange,
}: ItemsDialogProps) {
  // items가 없거나 배열이 아닌 경우 처리
  const itemList = React.useMemo(() => {
    if (!items || !Array.isArray(items)) return [];
    return items;
  }, [items]);

  // 총액 계산
  const totalAmount = React.useMemo(() => {
    return itemList.reduce((sum, item) => {
      const subtotal = (item.quantity || 0) * (item.estimatedUnitPrice || 0);
      return sum + subtotal;
    }, 0);
  }, [itemList]);

  // 총 수량 계산
  const totalQuantity = React.useMemo(() => {
    return itemList.reduce((sum, item) => sum + (item.quantity || 0), 0);
  }, [itemList]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl max-h-[80vh] overflow-hidden flex flex-col">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Package className="h-5 w-5" />
            품목 상세 정보
          </DialogTitle>
          <DialogDescription>
            요청번호: {requestCode} | 총 {itemList.length}개 품목
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 overflow-auto">
          {itemList.length === 0 ? (
            <div className="flex items-center justify-center h-32">
              <p className="text-muted-foreground">등록된 품목이 없습니다.</p>
            </div>
          ) : (
            <Table>
              <TableHeader className="sticky top-0 bg-background">
                <TableRow>
                  <TableHead className="w-[50px]">번호</TableHead>
                  <TableHead className="w-[120px]">아이템 코드</TableHead>
                  <TableHead>아이템명</TableHead>
                  <TableHead>사양</TableHead>
                  <TableHead className="text-right w-[80px]">수량</TableHead>
                  <TableHead className="w-[60px]">단위</TableHead>
                  <TableHead className="text-right w-[120px]">예상 단가</TableHead>
                  <TableHead className="text-right w-[140px]">예상 금액</TableHead>
                  <TableHead className="w-[150px]">비고</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {itemList.map((item, index) => {
                  const subtotal = (item.quantity || 0) * (item.estimatedUnitPrice || 0);
                  return (
                    <TableRow key={item.id || index}>
                      <TableCell className="text-center text-muted-foreground">
                        {index + 1}
                      </TableCell>
                      <TableCell className="font-mono text-sm">
                        {item.itemCode}
                      </TableCell>
                      <TableCell className="font-medium">
                        {item.itemName}
                      </TableCell>
                      <TableCell className="text-sm">
                        {item.specification || "-"}
                      </TableCell>
                      <TableCell className="text-right font-medium">
                        {item.quantity?.toLocaleString('ko-KR')}
                      </TableCell>
                      <TableCell className="text-center">
                        {item.unit}
                      </TableCell>
                      <TableCell className="text-right">
                        {item.estimatedUnitPrice 
                          ? new Intl.NumberFormat('ko-KR').format(item.estimatedUnitPrice)
                          : "-"}
                      </TableCell>
                      <TableCell className="text-right font-medium">
                        {subtotal > 0
                          ? new Intl.NumberFormat('ko-KR').format(subtotal)
                          : "-"}
                      </TableCell>
                      <TableCell className="text-sm text-muted-foreground">
                        {item.remarks || "-"}
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
              <TableFooter>
                <TableRow className="bg-muted/50">
                  <TableCell colSpan={4} className="font-medium">
                    합계
                  </TableCell>
                  <TableCell className="text-right font-bold">
                    {totalQuantity.toLocaleString('ko-KR')}
                  </TableCell>
                  <TableCell></TableCell>
                  <TableCell></TableCell>
                  <TableCell className="text-right font-bold text-lg">
                    {new Intl.NumberFormat('ko-KR', {
                      style: 'currency',
                      currency: 'KRW'
                    }).format(totalAmount)}
                  </TableCell>
                  <TableCell></TableCell>
                </TableRow>
              </TableFooter>
            </Table>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}