path: root/lib/tech-vendors/possible-items/add-item-dialog.tsx

"use client";

import * as React from "react";
import { Search, X } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { 
  getItemsForTechVendor,
  addTechVendorPossibleItem
} from "../service";

interface ItemData {
  id: number;
  itemCode: string | null;
  itemList: string | null;
  workType: string | null;
  shipTypes?: string | null;
  subItemList?: string | null;
  itemType: "SHIP" | "TOP" | "HULL";
  createdAt: Date;
  updatedAt: Date;
}

interface AddItemDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  vendorId: number;
}

export function AddItemDialog({ open, onOpenChange, vendorId }: AddItemDialogProps) {
  // 아이템 관련 상태
  const [items, setItems] = React.useState<ItemData[]>([]);
  const [filteredItems, setFilteredItems] = React.useState<ItemData[]>([]);
  const [itemSearch, setItemSearch] = React.useState("");
  const [selectedItems, setSelectedItems] = React.useState<ItemData[]>([]);
  
  const [isLoading, setIsLoading] = React.useState(false);

  // 다이얼로그가 열릴 때 아이템 목록 로드
  React.useEffect(() => {
    if (open && vendorId) {
      loadItems();
    }
  }, [open, vendorId]);

  // 아이템 검색 필터링
  React.useEffect(() => {
    if (!itemSearch) {
      setFilteredItems(items);
    } else {
      const filtered = items.filter(item => 
        item.itemCode?.toLowerCase().includes(itemSearch.toLowerCase()) ||
        item.itemList?.toLowerCase().includes(itemSearch.toLowerCase()) ||
        item.workType?.toLowerCase().includes(itemSearch.toLowerCase())
      );
      setFilteredItems(filtered);
    }
  }, [items, itemSearch]);

  const loadItems = async () => {
    try {
      setIsLoading(true);
      console.log("Loading items for vendor:", vendorId);
      const result = await getItemsForTechVendor(vendorId);
      
      if (result.error) {
        throw new Error(result.error);
      }
      
      console.log("Loaded items:", result.data.length, result.data);
      // itemCode가 null이 아닌 항목만 필터링
      const validItems = result.data.filter(item => item.itemCode != null);
      setItems(validItems as ItemData[]);
    } catch (error) {
      console.error("Failed to load items:", error);
      toast.error("아이템 목록을 불러오는데 실패했습니다.");
    } finally {
      setIsLoading(false);
    }
  };

  const handleItemToggle = (item: ItemData) => {
    if (!item.itemCode) return; // itemCode가 null인 경우 처리하지 않음
    
    setSelectedItems(prev => {
      // id + itemType 조합으로 중복 체크
      const isSelected = prev.some(i => 
        i.id === item.id && i.itemType === item.itemType
      );
      if (isSelected) {
        return prev.filter(i => 
          !(i.id === item.id && i.itemType === item.itemType)
        );
      } else {
        return [...prev, item];
      }
    });
  };

  const handleSubmit = async () => {
    if (selectedItems.length === 0) return;

    try {
      setIsLoading(true);
      let successCount = 0;
      let errorCount = 0;

      for (const item of selectedItems) {
        if (!item.itemCode) continue; // itemCode가 null인 경우 건너뛰기
        
        const result = await addTechVendorPossibleItem({
          vendorId: vendorId,
          itemId: item.id,
          itemType: item.itemType,
        });

        if (result.success) {
          successCount++;
        } else {
          errorCount++;
          console.error("Failed to add item:", item.itemCode, result.error);
        }
      }

      if (successCount > 0) {
        toast.success(
          `${successCount}개의 아이템이 추가되었습니다.${
            errorCount > 0 ? ` (${errorCount}개 실패)` : ""
          }`
        );
        
        handleClose();
      } else {
        toast.error("아이템 추가에 실패했습니다.");
      }
    } catch (error) {
      console.error("Failed to add items:", error);
      toast.error("아이템 추가 중 오류가 발생했습니다.");
    } finally {
      setIsLoading(false);
    }
  };

  const handleClose = () => {
    onOpenChange(false);
    setTimeout(() => {
      setSelectedItems([]);
      setItemSearch("");
      setItems([]);
      setFilteredItems([]);
    }, 200);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>아이템 추가</DialogTitle>
          <DialogDescription>
            추가할 아이템을 선택하세요. 복수 선택이 가능합니다.
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 min-h-0 space-y-4">
          {/* 검색 */}
          <div className="space-y-2">
            <Label htmlFor="item-search">아이템 검색</Label>
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
              <Input
                id="item-search"
                placeholder="아이템코드, 아이템리스트, 공종으로 검색..."
                value={itemSearch}
                onChange={(e) => setItemSearch(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>

          {/* 선택된 아이템 표시 */}
          {selectedItems.length > 0 && (
            <div className="space-y-2">
              <Label>선택된 아이템 ({selectedItems.length}개)</Label>
                             <div className="flex flex-wrap gap-1 p-2 border rounded-md bg-muted/50 max-h-20 overflow-y-auto">
                 {selectedItems.map((item) => {
                   if (!item.itemCode) return null;
                   const itemKey = `${item.itemType}-${item.id}-${item.itemCode}${item.shipTypes ? `-${item.shipTypes}` : ''}`;
                   const displayText = `[${item.itemType}] ${item.itemCode}${item.shipTypes ? `-${item.shipTypes}` : ''}`;
                   return (
                     <Badge key={`selected-${itemKey}`} variant="default" className="text-xs">
                       {displayText}
                       <X 
                         className="ml-1 h-3 w-3 cursor-pointer" 
                         onClick={(e) => {
                           e.stopPropagation();
                           handleItemToggle(item);
                         }}
                       />
                     </Badge>
                   );
                 })}
               </div>
            </div>
          )}
          
          {/* 아이템 목록 */}
          <div className="max-h-96 overflow-y-auto border rounded-lg bg-gray-50 p-2">
            <div className="space-y-2">
              {isLoading ? (
                <div className="text-center py-4">아이템 로딩 중...</div>
              ) : filteredItems.length === 0 && items.length === 0 ? (
                <div className="text-center py-4 text-muted-foreground">
                  해당 벤더 타입에 대한 추가 가능한 아이템이 없습니다.
                </div>
              ) : filteredItems.length === 0 ? (
                <div className="text-center py-4 text-muted-foreground">
                  검색 결과가 없습니다.
                </div>
              ) : (
                filteredItems.map((item) => {
                  if (!item.itemCode) return null; // itemCode가 null인 경우 렌더링하지 않음
                  
                  // id + itemType 조합으로 선택 여부 체크
                  const isSelected = selectedItems.some(i => 
                    i.id === item.id && i.itemType === item.itemType
                  );
                  const itemKey = `${item.itemType}-${item.id}-${item.itemCode}${item.shipTypes ? `-${item.shipTypes}` : ''}`;
                  
                  return (
                    <div
                      key={`item-${itemKey}`}
                      className={`p-3 bg-white border rounded-lg cursor-pointer transition-colors ${
                        isSelected 
                          ? "bg-primary/10 border-primary hover:bg-primary/20" 
                          : "hover:bg-gray-50"
                      }`}
                      onClick={() => handleItemToggle(item)}
                    >
                      <div className="font-medium">
                        {`[${item.itemType}] ${item.itemCode}${item.shipTypes ? `-${item.shipTypes}` : ''}`}
                      </div>
                      <div className="text-sm text-muted-foreground">
                        {item.itemList || "-"}
                      </div>
                      <div className="flex gap-2 mt-1 text-xs">
                        <span>공종: {item.workType || "-"}</span>
                        {item.shipTypes && <span>선종: {item.shipTypes}</span>}
                        {item.subItemList && <span>서브아이템: {item.subItemList}</span>}
                      </div>
                    </div>
                  );
                })
              )}
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 pt-4 border-t">
          <Button variant="outline" onClick={handleClose}>
            취소
          </Button>
          <Button 
            onClick={handleSubmit}
            disabled={selectedItems.length === 0 || isLoading}
          >
            {isLoading ? "추가 중..." : `추가 (${selectedItems.length})`}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}