"use client";

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

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { useToast } from "@/hooks/use-toast";
import { 
  getAllTechVendors, 
  createTechVendorPossibleItem,
  getItemsByVendorType
} from "@/lib/tech-vendor-possible-items/service";

interface TechVendor {
  id: number;
  vendorCode: string | null;
  vendorName: string;
  techVendorType: string;
}

interface ItemData {
  itemCode: string;
  itemList: string | null;
  workType: string | null;
  shipTypes?: string | null;
  subItemList?: string | null;
}

interface AddPossibleItemDialogProps {
  children?: React.ReactNode;
  onSuccess?: () => void;
}

export function AddPossibleItemDialog({ 
  children, 
  onSuccess 
}: AddPossibleItemDialogProps) {
  const { toast } = useToast();
  const [open, setOpen] = React.useState(false);
  
  // 벤더 관련 상태
  const [vendors, setVendors] = React.useState<TechVendor[]>([]);
  const [filteredVendors, setFilteredVendors] = React.useState<TechVendor[]>([]);
  const [vendorSearch, setVendorSearch] = React.useState("");
  const [selectedVendor, setSelectedVendor] = React.useState<TechVendor | null>(null);
  
  // 아이템 관련 상태
  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) {
      loadVendors();
    }
  }, [open]);

  // 벤더 검색 필터링
  React.useEffect(() => {
    if (!vendorSearch) {
      setFilteredVendors(vendors);
    } else {
      const filtered = vendors.filter(vendor => 
        vendor.vendorName.toLowerCase().includes(vendorSearch.toLowerCase()) ||
        vendor.vendorCode?.toLowerCase().includes(vendorSearch.toLowerCase())
      );
      setFilteredVendors(filtered);
    }
  }, [vendors, vendorSearch]);

  // 아이템 검색 필터링
  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 loadVendors = async () => {
    try {
      setIsLoading(true);
      const vendorData = await getAllTechVendors();
      setVendors(vendorData);
    } catch (error) {
      console.error("Failed to load vendors:", error);
      toast({
        title: "오류",
        description: "벤더 목록을 불러오는데 실패했습니다.",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  const loadItemsByVendorType = async (vendorTypes: string) => {
    try {
      setIsLoading(true);
      console.log("Loading items for vendor types:", vendorTypes);
      const itemData = await getItemsByVendorType(vendorTypes);
      console.log("Loaded items:", itemData.length, itemData);
      setItems(itemData);
    } catch (error) {
      console.error("Failed to load items:", error);
      toast({
        title: "오류",
        description: "아이템 목록을 불러오는데 실패했습니다.",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  const handleVendorSelect = (vendor: TechVendor) => {
    setSelectedVendor(vendor);
    setSelectedItems([]); // 벤더 변경시 선택된 아이템 초기화
    loadItemsByVendorType(vendor.techVendorType);
  };

  const handleItemToggle = (item: ItemData) => {
    setSelectedItems(prev => {
      const isSelected = prev.some(i => i.itemCode === item.itemCode);
      if (isSelected) {
        return prev.filter(i => i.itemCode !== item.itemCode);
      } else {
        return [...prev, item];
      }
    });
  };

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

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

      for (const item of selectedItems) {
        const result = await createTechVendorPossibleItem({
          vendorId: selectedVendor.id,
          itemCode: item.itemCode,
          workType: item.workType,
          shipTypes: item.shipTypes,
          itemList: item.itemList,
          subItemList: item.subItemList,
        });

        if (result.success) {
          successCount++;
        } else {
          errorCount++;
        }
      }

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

  const handleClose = () => {
    setOpen(false);
    setTimeout(() => {
      setSelectedVendor(null);
      setSelectedItems([]);
      setVendorSearch("");
      setItemSearch("");
      setVendors([]);
      setItems([]);
      setFilteredVendors([]);
      setFilteredItems([]);
    }, 200);
  };

  const parseVendorTypes = (vendorType: string): string[] => {
    if (!vendorType) return [];
    
    // JSON 배열 형태인지 확인
    if (vendorType.startsWith('[') && vendorType.endsWith(']')) {
      try {
        const parsed = JSON.parse(vendorType);
        return Array.isArray(parsed) ? parsed.filter(Boolean) : [vendorType];
      } catch {
        return [vendorType];
      }
    }
    
    // 콤마로 구분된 문자열인지 확인
    if (vendorType.includes(',')) {
      return vendorType.split(',').map(t => t.trim()).filter(Boolean);
    }
    
    // 단일 문자열
    return [vendorType.trim()].filter(Boolean);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {children || (
          <Button size="sm">
            <Plus className="mr-2 h-4 w-4" />
            추가
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="max-w-6xl max-h-[90vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>
            벤더별 아이템 추가
          </DialogTitle>
          <DialogDescription>
            왼쪽에서 벤더를 선택하고, 오른쪽에서 아이템을 선택하세요.
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 min-h-0">
          <div className="grid grid-cols-2 gap-4 h-[500px]">
            {/* 왼쪽: 벤더 선택/표시 */}
            <div className="space-y-4 h-full flex flex-col">
              {!selectedVendor ? (
                <>
                  <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"
                      />
                    </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>
                      ) : filteredVendors.length === 0 ? (
                        <div className="text-center py-4 text-muted-foreground">
                          검색 결과가 없습니다.
                        </div>
                      ) : (
                        filteredVendors.map((vendor) => (
                          <div
                            key={vendor.id}
                            className="p-3 bg-white border rounded-lg cursor-pointer transition-colors hover:bg-gray-50"
                            onClick={() => handleVendorSelect(vendor)}
                          >
                            <div className="font-medium">{vendor.vendorName}</div>
                            <div className="text-sm text-muted-foreground">
                              {vendor.vendorCode}
                            </div>
                            <div className="flex flex-wrap gap-1 mt-2">
                              {parseVendorTypes(vendor.techVendorType).map((type, index) => (
                                <Badge key={`${vendor.id}-${type}-${index}`} variant="secondary" className="text-xs">
                                  {type}
                                </Badge>
                              ))}
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  </div>
                </>
              ) : (
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <Label>선택된 벤더</Label>
                    <Button 
                      variant="outline" 
                      size="sm"
                      onClick={() => {
                        setSelectedVendor(null);
                        setSelectedItems([]);
                        setItems([]);
                        setFilteredItems([]);
                      }}
                    >
                      변경
                    </Button>
                  </div>
                  <div className="p-4 border rounded-md bg-muted/20">
                    <div className="font-medium">{selectedVendor?.vendorName}</div>
                    <div className="text-sm text-muted-foreground">
                      {selectedVendor?.vendorCode}
                    </div>
                    <div className="flex flex-wrap gap-1 mt-2">
                      {selectedVendor && parseVendorTypes(selectedVendor.techVendorType).map((type, index) => (
                        <Badge key={`selected-${type}-${index}`} variant="outline" className="text-xs">
                          {type}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>



            {/* 오른쪽: 아이템 선택 */}
            <div className="space-y-4 h-full flex flex-col">
              {selectedVendor ? (
                <>

                    
                    <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>


                  {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) => (
                          <Badge key={`selected-${item.itemCode}`} variant="default" className="text-xs">
                            {item.itemCode}
                            <X 
                              className="ml-1 h-3 w-3 cursor-pointer" 
                              onClick={(e) => {
                                e.stopPropagation();
                                handleItemToggle(item);
                              }}
                            />
                          </Badge>
                        ))}
                      </div>
                    </div>
                  )}
                  
                  <div className="max-h-80 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) => {
                          const isSelected = selectedItems.some(i => i.itemCode === item.itemCode);
                          return (
                            <div
                              key={`item-${item.itemCode}`}
                              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.itemCode}</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 className="flex-1 flex items-center justify-center text-muted-foreground">
                  왼쪽에서 벤더를 선택하세요.
                </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={!selectedVendor || selectedItems.length === 0 || isLoading}
          >
            {isLoading ? "추가 중..." : `추가 (${selectedItems.length})`}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}