path: root/lib/material/vendor-material/simple-vendor-materials.tsx

"use client";

import * as React from "react";
import { useState, useMemo } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { ArrowUpDown, Search } from "lucide-react";
import { VendorPossibleMaterial } from "../vendor-possible-material-service";
import { AddConfirmedMaterial } from "./add-confirmed-material";
// formatDate 함수 제거 - YYYY-MM-DD 형식으로 직접 포맷

interface SimpleVendorMaterialsProps {
  vendorId: number;
  confirmedMaterials: VendorPossibleMaterial[];
  vendorInputMaterials: VendorPossibleMaterial[];
  onDataRefresh?: () => void;
}

type SortField = "itemCode" | "itemName" | "createdAt" | "recentPoDate" | "recentDeliveryDate" | "vendorTypeNameEn" | "recentPoNo" | "registerUserName";
type SortDirection = "asc" | "desc";

interface SortState {
  field: SortField | null;
  direction: SortDirection;
}

export function SimpleVendorMaterials({
  vendorId,
  confirmedMaterials,
  vendorInputMaterials,
  onDataRefresh,
}: SimpleVendorMaterialsProps) {
  // 날짜를 YYYY-MM-DD 형식으로 포맷하는 함수
  const formatDateToYMD = (date: Date | null | undefined): string => {
    if (!date) return "-";
    return date.toISOString().split('T')[0];
  };
  const [confirmedSearch, setConfirmedSearch] = useState("");
  const [vendorInputSearch, setVendorInputSearch] = useState("");
  const [confirmedSort, setConfirmedSort] = useState<SortState>({ field: null, direction: "asc" });
  const [vendorInputSort, setVendorInputSort] = useState<SortState>({ field: null, direction: "asc" });

  // 검색 필터링 함수
  const filterMaterials = (materials: VendorPossibleMaterial[], searchTerm: string) => {
    if (!searchTerm.trim()) return materials;
    
    const lowercaseSearch = searchTerm.toLowerCase();
    return materials.filter(material => 
      (material.itemCode?.toLowerCase().includes(lowercaseSearch)) ||
      (material.itemName?.toLowerCase().includes(lowercaseSearch))
    );
  };

  // 정렬 함수
  const sortMaterials = (materials: VendorPossibleMaterial[], sortState: SortState) => {
    if (!sortState.field) return materials;

    return [...materials].sort((a, b) => {
      let aValue: string | Date;
      let bValue: string | Date;

      switch (sortState.field) {
        case "itemCode":
          aValue = a.itemCode || "";
          bValue = b.itemCode || "";
          break;
        case "itemName":
          aValue = a.itemName || "";
          bValue = b.itemName || "";
          break;
        case "createdAt":
          aValue = a.createdAt;
          bValue = b.createdAt;
          break;
        case "recentPoDate":
          aValue = a.recentPoDate || new Date(0);
          bValue = b.recentPoDate || new Date(0);
          break;
        case "recentDeliveryDate":
          aValue = a.recentDeliveryDate || new Date(0);
          bValue = b.recentDeliveryDate || new Date(0);
          break;
        case "vendorTypeNameEn":
          aValue = a.vendorTypeNameEn || "";
          bValue = b.vendorTypeNameEn || "";
          break;
        case "recentPoNo":
          aValue = a.recentPoNo || "";
          bValue = b.recentPoNo || "";
          break;
        case "registerUserName":
          aValue = a.registerUserName || "";
          bValue = b.registerUserName || "";
          break;
        default:
          return 0;
      }

      if (aValue < bValue) return sortState.direction === "asc" ? -1 : 1;
      if (aValue > bValue) return sortState.direction === "asc" ? 1 : -1;
      return 0;
    });
  };

  // 필터링 및 정렬된 데이터
  const filteredAndSortedConfirmed = useMemo(() => {
    const filtered = filterMaterials(confirmedMaterials, confirmedSearch);
    return sortMaterials(filtered, confirmedSort);
  }, [confirmedMaterials, confirmedSearch, confirmedSort]);

  const filteredAndSortedVendorInput = useMemo(() => {
    const filtered = filterMaterials(vendorInputMaterials, vendorInputSearch);
    return sortMaterials(filtered, vendorInputSort);
  }, [vendorInputMaterials, vendorInputSearch, vendorInputSort]);

  // 정렬 핸들러
  const handleSort = (
    field: SortField, 
    currentSort: SortState, 
    setSort: React.Dispatch<React.SetStateAction<SortState>>
  ) => {
    setSort(prev => ({
      field,
      direction: prev.field === field && prev.direction === "asc" ? "desc" : "asc"
    }));
  };

  // 정렬 버튼 컴포넌트
  const SortButton = ({ 
    field, 
    children, 
    onSort 
  }: { 
    field: SortField; 
    children: React.ReactNode; 
    onSort: (field: SortField) => void;
  }) => (
    <Button
      variant="ghost"
      size="sm"
      className="h-8 px-2"
      onClick={() => onSort(field)}
    >
      {children}
      <ArrowUpDown className="ml-2 h-4 w-4" />
    </Button>
  );

  return (
    <div className="space-y-8">
      {/* 확정정보 테이블 */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>확정정보</CardTitle>
              <CardDescription>
                구매담당자가 확정한 공급 품목 정보입니다.
              </CardDescription>
            </div>
            <AddConfirmedMaterial
              vendorId={vendorId}
              existingConfirmedMaterials={confirmedMaterials}
              onMaterialAdded={onDataRefresh}
            />
          </div>
          <div className="flex items-center space-x-2">
            <Search className="h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="자재그룹코드 또는 자재그룹명으로 검색..."
              value={confirmedSearch}
              onChange={(e) => setConfirmedSearch(e.target.value)}
              className="max-w-sm"
            />
          </div>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border max-h-96 overflow-auto">
            <Table>
              <TableHeader className="sticky top-0 bg-background z-10">
                <TableRow>
                  <TableHead>
                    <SortButton
                      field="vendorTypeNameEn"
                      onSort={(field) => handleSort(field, confirmedSort, setConfirmedSort)}
                    >
                      업체유형
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="itemCode"
                      onSort={(field) => handleSort(field, confirmedSort, setConfirmedSort)}
                    >
                      자재그룹코드
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="itemName"
                      onSort={(field) => handleSort(field, confirmedSort, setConfirmedSort)}
                    >
                      자재그룹명
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="recentPoNo"
                      onSort={(field) => handleSort(field, confirmedSort, setConfirmedSort)}
                    >
                      최근 Po No.
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="recentPoDate"
                      onSort={(field) => handleSort(field, confirmedSort, setConfirmedSort)}
                    >
                      최근 Po일
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="recentDeliveryDate"
                      onSort={(field) => handleSort(field, confirmedSort, setConfirmedSort)}
                    >
                      최근 납품일
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="createdAt"
                      onSort={(field) => handleSort(field, confirmedSort, setConfirmedSort)}
                    >
                      등록일
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="registerUserName"
                      onSort={(field) => handleSort(field, confirmedSort, setConfirmedSort)}
                    >
                      등록자명
                    </SortButton>
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredAndSortedConfirmed.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={8} className="text-center text-muted-foreground">
                      {confirmedSearch ? "검색 결과가 없습니다." : "확정된 공급품목이 없습니다."}
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredAndSortedConfirmed.map((material) => (
                    <TableRow key={material.id}>
                      <TableCell>{material.vendorTypeNameEn || "-"}</TableCell>
                      <TableCell className="font-mono">{material.itemCode || "-"}</TableCell>
                      <TableCell>{material.itemName || "-"}</TableCell>
                      <TableCell className="font-mono">{material.recentPoNo || "-"}</TableCell>
                      <TableCell>{formatDateToYMD(material.recentPoDate)}</TableCell>
                      <TableCell>{formatDateToYMD(material.recentDeliveryDate)}</TableCell>
                      <TableCell>{formatDateToYMD(material.createdAt)}</TableCell>
                      <TableCell>{material.registerUserName || "-"}</TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
          <div className="mt-2 text-sm text-muted-foreground">
            총 {filteredAndSortedConfirmed.length}건
          </div>
        </CardContent>
      </Card>

      {/* 업체입력정보 테이블 */}
      <Card>
        <CardHeader>
          <CardTitle>업체입력정보</CardTitle>
          <CardDescription>
            업체에서 입력한 공급 가능 품목 정보입니다.
          </CardDescription>
          <div className="flex items-center space-x-2">
            <Search className="h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="자재그룹코드 또는 자재그룹명으로 검색..."
              value={vendorInputSearch}
              onChange={(e) => setVendorInputSearch(e.target.value)}
              className="max-w-sm"
            />
          </div>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border max-h-96 overflow-auto">
            <Table>
              <TableHeader className="sticky top-0 bg-background z-10">
                <TableRow>
                  <TableHead>
                    <SortButton
                      field="vendorTypeNameEn"
                      onSort={(field) => handleSort(field, vendorInputSort, setVendorInputSort)}
                    >
                      업체유형
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="itemCode"
                      onSort={(field) => handleSort(field, vendorInputSort, setVendorInputSort)}
                    >
                      자재그룹코드
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="itemName"
                      onSort={(field) => handleSort(field, vendorInputSort, setVendorInputSort)}
                    >
                      자재그룹명
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="createdAt"
                      onSort={(field) => handleSort(field, vendorInputSort, setVendorInputSort)}
                    >
                      등록일
                    </SortButton>
                  </TableHead>
                  <TableHead>
                    <SortButton
                      field="registerUserName"
                      onSort={(field) => handleSort(field, vendorInputSort, setVendorInputSort)}
                    >
                      등록자명
                    </SortButton>
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredAndSortedVendorInput.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center text-muted-foreground">
                      {vendorInputSearch ? "검색 결과가 없습니다." : "업체입력 정보가 없습니다."}
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredAndSortedVendorInput.map((material) => (
                    <TableRow key={material.id}>
                      <TableCell>{material.vendorTypeNameEn || "-"}</TableCell>
                      <TableCell className="font-mono">{material.itemCode || "-"}</TableCell>
                      <TableCell>{material.itemName || "-"}</TableCell>
                      <TableCell>{formatDateToYMD(material.createdAt)}</TableCell>
                      <TableCell>{material.registerUserName || "-"}</TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
          <div className="mt-2 text-sm text-muted-foreground">
            총 {filteredAndSortedVendorInput.length}건
          </div>
        </CardContent>
      </Card>
    </div>
  );
}