path: root/lib/tech-vendors/possible-items/connect-item-vendor-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 {
  getItemsForVendorMapping,
  getConnectableVendorsForItem,
  connectItemWithVendors,
} from "../service";

type ItemType = "SHIP" | "TOP" | "HULL";

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

interface VendorData {
  id: number;
  vendorName: string;
  email: string | null;
  techVendorType: string;
  status: string;
}

interface ConnectItemVendorDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConnected?: () => void;
}

export function ConnectItemVendorDialog({
  open,
  onOpenChange,
  onConnected,
}: ConnectItemVendorDialogProps) {
  const [items, setItems] = React.useState<ItemData[]>([]);
  const [filteredItems, setFilteredItems] = React.useState<ItemData[]>([]);
  const [itemSearch, setItemSearch] = React.useState("");
  const [selectedItem, setSelectedItem] = React.useState<ItemData | null>(null);

  const [vendors, setVendors] = React.useState<VendorData[]>([]);
  const [filteredVendors, setFilteredVendors] = React.useState<VendorData[]>([]);
  const [vendorSearch, setVendorSearch] = React.useState("");
  const [selectedVendorIds, setSelectedVendorIds] = React.useState<number[]>([]);

  const [isLoadingItems, setIsLoadingItems] = React.useState(false);
  const [isLoadingVendors, setIsLoadingVendors] = React.useState(false);
  const [isSubmitting, setIsSubmitting] = React.useState(false);

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

  // 아이템 검색 필터링
  React.useEffect(() => {
    if (!itemSearch) {
      setFilteredItems(items);
      return;
    }

    const lowered = itemSearch.toLowerCase();
    const filtered = items.filter((item) =>
      [item.itemCode, item.itemList, item.workType, item.shipTypes, item.subItemList]
        .filter(Boolean)
        .some((value) => value?.toLowerCase().includes(lowered))
    );
    setFilteredItems(filtered);
  }, [items, itemSearch]);

  // 벤더 검색 필터링
  React.useEffect(() => {
    if (!vendorSearch) {
      setFilteredVendors(vendors);
      return;
    }

    const lowered = vendorSearch.toLowerCase();
    const filtered = vendors.filter((vendor) =>
      [vendor.vendorName, vendor.email, vendor.techVendorType, vendor.status]
        .filter(Boolean)
        .some((value) => value?.toLowerCase().includes(lowered))
    );
    setFilteredVendors(filtered);
  }, [vendors, vendorSearch]);

  // 특정 아이템 선택 시 연결 가능한 벤더 목록 로드
  React.useEffect(() => {
    if (!selectedItem) {
      setVendors([]);
      setFilteredVendors([]);
      setSelectedVendorIds([]);
      return;
    }
    loadVendors(selectedItem);
  }, [selectedItem]);

  const loadItems = async () => {
    setIsLoadingItems(true);
    try {
      const result = await getItemsForVendorMapping();
      if (result.error) {
        throw new Error(result.error);
      }
      const validItems = (result.data as ItemData[]).filter((item) => item.itemCode != null);
      setItems(validItems);
    } catch (error) {
      console.error("Failed to load items for mapping:", error);
      toast.error("아이템 목록을 불러오는데 실패했습니다.");
    } finally {
      setIsLoadingItems(false);
    }
  };

  const loadVendors = async (item: ItemData) => {
    setIsLoadingVendors(true);
    try {
      const result = await getConnectableVendorsForItem(item.id, item.itemType);
      if (result.error) {
        throw new Error(result.error);
      }
      setVendors(result.data as VendorData[]);
    } catch (error) {
      console.error("Failed to load vendors for item:", error);
      toast.error("연결 가능한 벤더 목록을 불러오는데 실패했습니다.");
    } finally {
      setIsLoadingVendors(false);
    }
  };

  const handleItemSelect = (item: ItemData) => {
    if (!item.itemCode) return;
    setSelectedItem(item);
  };

  const handleVendorToggle = (vendorId: number) => {
    setSelectedVendorIds((prev) =>
      prev.includes(vendorId)
        ? prev.filter((id) => id !== vendorId)
        : [...prev, vendorId]
    );
  };

  const handleSubmit = async () => {
    if (!selectedItem || selectedVendorIds.length === 0) return;

    setIsSubmitting(true);
    try {
      const result = await connectItemWithVendors({
        itemId: selectedItem.id,
        itemType: selectedItem.itemType,
        vendorIds: selectedVendorIds,
      });

      if (!result.success) {
        throw new Error(result.error || "연결에 실패했습니다.");
      }

      const successCount = result.successCount || 0;
      const skippedCount = result.skipped?.length || 0;

      toast.success(
        `${successCount}개 벤더와 연결되었습니다${
          skippedCount > 0 ? ` (${skippedCount}개 중복 제외)` : ""
        }`
      );

      onConnected?.();
      handleClose();
    } catch (error) {
      console.error("Failed to connect item with vendors:", error);
      toast.error(error instanceof Error ? error.message : "연결 중 오류가 발생했습니다.");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleClose = () => {
    onOpenChange(false);
    setTimeout(() => {
      setItemSearch("");
      setVendorSearch("");
      setSelectedItem(null);
      setSelectedVendorIds([]);
      setItems([]);
      setFilteredItems([]);
      setVendors([]);
      setFilteredVendors([]);
    }, 200);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl max-h-[90vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>아이템 기준 벤더 연결</DialogTitle>
          <DialogDescription>
            연결할 아이템을 먼저 선택한 후, 해당 아이템과 연결할 벤더를 선택하세요.
          </DialogDescription>
        </DialogHeader>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 min-h-0">
          {/* 아이템 선택 영역 */}
          <div className="flex flex-col space-y-3">
            <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>

            {selectedItem && (
              <div className="space-y-2">
                <Label>선택된 아이템</Label>
                <div className="flex flex-wrap gap-1 p-2 border rounded-md bg-muted/50">
                  <Badge variant="default" className="text-xs">
                    {[selectedItem.itemType, selectedItem.itemCode, selectedItem.shipTypes]
                      .filter(Boolean)
                      .join("-")}
                    <X
                      className="ml-1 h-3 w-3 cursor-pointer"
                      onClick={(e) => {
                        e.stopPropagation();
                        setSelectedItem(null);
                      }}
                    />
                  </Badge>
                </div>
              </div>
            )}

            <div className="flex-1 min-h-0 overflow-hidden">
              <div className="max-h-96 overflow-y-auto border rounded-lg bg-gray-50 p-2 h-full">
                {isLoadingItems ? (
                  <div className="text-center py-4">아이템 로딩 중...</div>
                ) : filteredItems.length === 0 ? (
                  <div className="text-center py-4 text-muted-foreground">
                    아이템이 없습니다.
                  </div>
                ) : (
                  <div className="space-y-2">
                    {filteredItems.map((item) => {
                      if (!item.itemCode) return null;
                      const isSelected = selectedItem?.id === item.id && selectedItem.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={() => handleItemSelect(item)}
                        >
                          <div className="font-medium">
                            {[`[${item.itemType}]`, item.itemCode, item.shipTypes]
                              .filter(Boolean)
                              .join(" ")}
                          </div>
                          <div className="text-sm text-muted-foreground">
                            {item.itemList || "-"}
                          </div>
                          <div className="flex flex-wrap 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>

          {/* 벤더 선택 영역 */}
          <div className="flex flex-col space-y-3">
            <div className="space-y-2">
              <Label htmlFor="vendor-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="vendor-search"
                  placeholder="벤더명, 이메일, 벤더타입, 상태로 검색..."
                  value={vendorSearch}
                  onChange={(e) => setVendorSearch(e.target.value)}
                  className="pl-10"
                  disabled={!selectedItem}
                />
              </div>
            </div>

            {selectedVendorIds.length > 0 && (
              <div className="space-y-2">
                <Label>선택된 벤더 ({selectedVendorIds.length}개)</Label>
                <div className="flex flex-wrap gap-1 p-2 border rounded-md bg-muted/50 max-h-20 overflow-y-auto">
                  {vendors
                    .filter((vendor) => selectedVendorIds.includes(vendor.id))
                    .map((vendor) => (
                      <Badge key={`selected-vendor-${vendor.id}`} variant="default" className="text-xs">
                        {vendor.vendorName}
                        <X
                          className="ml-1 h-3 w-3 cursor-pointer"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleVendorToggle(vendor.id);
                          }}
                        />
                      </Badge>
                    ))}
                </div>
              </div>
            )}

            <div className="flex-1 min-h-0 overflow-hidden">
              <div className="max-h-96 overflow-y-auto border rounded-lg bg-gray-50 p-2 h-full">
                {!selectedItem ? (
                  <div className="text-center py-4 text-muted-foreground">
                    아이템을 먼저 선택해주세요.
                  </div>
                ) : isLoadingVendors ? (
                  <div className="text-center py-4">벤더 로딩 중...</div>
                ) : filteredVendors.length === 0 ? (
                  <div className="text-center py-4 text-muted-foreground">
                    연결 가능한 벤더가 없습니다.
                  </div>
                ) : (
                  <div className="space-y-2">
                    {filteredVendors.map((vendor) => {
                      const isSelected = selectedVendorIds.includes(vendor.id);
                      return (
                        <div
                          key={`vendor-${vendor.id}`}
                          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={() => handleVendorToggle(vendor.id)}
                        >
                          <div className="font-medium">{vendor.vendorName}</div>
                          <div className="text-sm text-muted-foreground">
                            {vendor.email || "-"}
                          </div>
                          <div className="flex flex-wrap gap-2 mt-1 text-xs">
                            <span>타입: {vendor.techVendorType || "-"}</span>
                            <span>상태: {vendor.status || "-"}</span>
                          </div>
                        </div>
                      );
                    })}
                  </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={!selectedItem || selectedVendorIds.length === 0 || isSubmitting}
          >
            {isSubmitting ? "연결 중..." : `연결 (${selectedVendorIds.length})`}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}