"use client"

import * as React from "react"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Package, FileText, X } from "lucide-react"
import { getVendorItemsByType } from "../service"

interface VendorPossibleItem {
  id: number;
  itemCode: string;
  itemList: string;
  workType: string | null;
  shipTypes?: string | null; // 조선용
  subItemList?: string | null; // 해양용
  techVendorType: "조선" | "해양TOP" | "해양HULL";
}

interface TechVendorPossibleItemsViewDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  vendor: {
    id: number;
    vendorName?: string | null;
    vendorCode?: string | null;
    techVendorType?: string | null;
  } | null;
}

export function TechVendorPossibleItemsViewDialog({
  open,
  onOpenChange,
  vendor,
}: TechVendorPossibleItemsViewDialogProps) {
  const [items, setItems] = React.useState<VendorPossibleItem[]>([]);
  const [loading, setLoading] = React.useState(false);

  console.log("TechVendorPossibleItemsViewDialog render:", { open, vendor });

  React.useEffect(() => {
    console.log("TechVendorPossibleItemsViewDialog useEffect:", { open, vendorId: vendor?.id });
    if (open && vendor?.id && vendor?.techVendorType) {
      loadItems();
    }
  }, [open, vendor?.id, vendor?.techVendorType]);

  const loadItems = async () => {
    if (!vendor?.id || !vendor?.techVendorType) return;
    
    console.log("Loading items for vendor:", vendor.id, vendor.techVendorType);
    setLoading(true);
    try {
      const result = await getVendorItemsByType(vendor.id, vendor.techVendorType);
      console.log("Items loaded:", result);
      if (result.data) {
        setItems(result.data);
      }
    } catch (error) {
      console.error("Failed to load items:", error);
    } finally {
      setLoading(false);
    }
  };

  const getTypeLabel = (type: string) => {
    switch (type) {
      case "조선":
        return "조선";
      case "해양TOP":
        return "해양TOP";
      case "해양HULL":
        return "해양HULL";
      default:
        return type;
    }
  };

  const getTypeColor = (type: string) => {
    switch (type) {
      case "조선":
        return "bg-blue-100 text-blue-800";
      case "해양TOP":
        return "bg-green-100 text-green-800";
      case "해양HULL":
        return "bg-purple-100 text-purple-800";
      default:
        return "bg-gray-100 text-gray-800";
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-none w-[1200px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            벤더 Possible Items 조회
            <Badge variant="outline" className="ml-2">
              {vendor?.vendorName || `Vendor #${vendor?.id}`}
            </Badge>
            {vendor?.techVendorType && (
              <Badge variant="secondary" className={getTypeColor(vendor.techVendorType)}>
                {getTypeLabel(vendor.techVendorType)}
              </Badge>
            )}
          </DialogTitle>
          <DialogDescription>
            해당 벤더가 공급 가능한 아이템 목록을 확인할 수 있습니다.
          </DialogDescription>
        </DialogHeader>

        <div className="overflow-x-auto w-full">
          <div className="space-y-4">
            {loading ? (
              <div className="flex items-center justify-center py-8">
                <div className="text-center space-y-2">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
                  <p className="text-sm text-muted-foreground">아이템을 불러오는 중...</p>
                </div>
              </div>
            ) : items.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-12 text-center">
                <FileText className="h-12 w-12 text-muted-foreground mb-3" />
                <h3 className="text-lg font-medium mb-1">등록된 아이템이 없습니다</h3>
                <p className="text-sm text-muted-foreground">
                  이 벤더에 등록된 아이템이 없습니다.
                </p>
              </div>
            ) : (
              <>
                {/* 헤더 행 (라벨) */}
                <div className="flex items-center gap-2 border-b pb-2 font-medium text-sm">
                  <div className="w-[50px] text-center">No.</div>
                  <div className="w-[120px] pl-2">타입</div>
                  <div className="w-[200px] ">자재 그룹</div>
                  <div className="w-[150px] ">공종</div>
                  <div className="w-[300px] ">자재명</div>
                  <div className="w-[150px] ">선종/자재명(상세)</div>
                </div>

                {/* 아이템 행들 */}
                <div className="max-h-[50vh] overflow-y-auto pr-1 space-y-2">
                  {items.map((item, index) => (
                    <div
                      key={item.id}
                      className="flex items-center gap-2 group hover:bg-gray-50 p-2 rounded-md transition-colors border"
                    >
                      <div className="w-[50px] text-center text-sm font-medium text-muted-foreground">
                        {index + 1}
                      </div>
                      <div className="w-[120px] pl-2">
                        <Badge variant="secondary" className={`text-xs ${getTypeColor(item.techVendorType)}`}>
                          {getTypeLabel(item.techVendorType)}
                        </Badge>
                      </div>
                      <div className="w-[200px] pl-2 font-mono text-sm">
                        {item.itemCode}
                      </div>
                      <div className="w-[150px] pl-2 text-sm">
                        {item.workType || '-'}
                      </div>
                      <div className="w-[300px] pl-2 font-medium">
                        {item.itemList}
                      </div>
                      <div className="w-[150px] pl-2 text-sm">
                        {item.techVendorType === '조선' ? item.shipTypes : item.subItemList}
                      </div>
                    </div>
                  ))}
                </div>

                <div className="flex justify-between items-center pt-2 border-t">
                  <div className="flex items-center gap-2">
                    <Package className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm text-muted-foreground">
                      총 {items.length}개 아이템
                    </span>
                  </div>
                </div>
              </>
            )}
          </div>
        </div>

        <DialogFooter className="mt-6">
          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
            <X className="mr-2 h-4 w-4" />
            닫기
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}