distribution_erp/src/app/(main)/product/spec/page.tsx

"use client";

import { useState, useCallback, useEffect } from "react";
import { DataGrid, type GridColumn } from "@/components/grid/data-grid";
import { SearchForm, SearchField } from "@/components/layout/search-form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import Swal from "sweetalert2";

// 사양관리
export default function ProductSpecPage() {
  const [projectNo, setProjectNo] = useState("");
  const [specName, setSpecName] = useState("");
  const [data, setData] = useState<Record<string, unknown>[]>([]);

  const columns: GridColumn[] = [
    {
      title: "프로젝트번호", field: "PROJECT_NO", width: 130, hozAlign: "center",
      cellClick: (row) => {
        window.open(
          `/product/spec/detail?objId=${row.OBJID}`,
          "specDetail",
          "width=1000,height=700"
        );
      },
    },
    { title: "프로젝트명", field: "PROJECT_NAME", width: 200, hozAlign: "left" },
    { title: "사양명", field: "SPEC_NAME", width: 200, hozAlign: "left" },
    { title: "사양값", field: "SPEC_VALUE", width: 150, hozAlign: "left" },
    { title: "단위", field: "UNIT", width: 80, hozAlign: "center" },
    { title: "비고", field: "REMARK", width: 200, hozAlign: "left" },
    { title: "등록일", field: "REG_DATE", width: 100, hozAlign: "center" },
    { title: "등록자", field: "REG_USER_NAME", width: 100, hozAlign: "center" },
  ];

  const fetchData = useCallback(async () => {
    try {
      const res = await fetch("/api/product/spec", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ project_no: projectNo, spec_name: specName }),
      });
      if (res.ok) {
        const json = await res.json();
        setData(json.RESULTLIST || []);
      }
    } catch {
      Swal.fire("오류", "데이터 조회 중 오류가 발생했습니다.", "error");
    }
  }, [projectNo, specName]);

  const handleAdd = async () => {
    const { value: form } = await Swal.fire({
      title: "사양 등록",
      html: `
        <div style="text-align:left;font-size:13px">
          <label style="display:block;margin-bottom:4px">프로젝트번호</label>
          <input id="swal-pn" class="swal2-input" style="width:100%;margin:0 0 8px" />
          <label style="display:block;margin-bottom:4px">사양명 <span style="color:red">*</span></label>
          <input id="swal-sn" class="swal2-input" style="width:100%;margin:0 0 8px" />
          <label style="display:block;margin-bottom:4px">사양값</label>
          <input id="swal-sv" class="swal2-input" style="width:100%;margin:0 0 8px" />
          <label style="display:block;margin-bottom:4px">단위</label>
          <input id="swal-un" class="swal2-input" style="width:100%;margin:0" />
        </div>`,
      showCancelButton: true, confirmButtonText: "저장", cancelButtonText: "취소",
      preConfirm: () => ({
        project_no: (document.getElementById("swal-pn") as HTMLInputElement)?.value,
        spec_name: (document.getElementById("swal-sn") as HTMLInputElement)?.value,
        spec_value: (document.getElementById("swal-sv") as HTMLInputElement)?.value,
        unit: (document.getElementById("swal-un") as HTMLInputElement)?.value,
      }),
    });
    if (!form || !form.spec_name) return;
    const res = await fetch("/api/product/spec/save", {
      method: "POST", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ actionType: "regist", ...form }),
    });
    const json = await res.json();
    if (json.success) {
      Swal.fire({ icon: "success", title: json.message, timer: 1200, showConfirmButton: false });
      fetchData();
    } else Swal.fire("오류", json.message || "저장 실패", "error");
  };

  const handleDelete = () => {
    Swal.fire("알림", "항목을 선택한 뒤 다시 시도하세요 (리스트 삭제는 별도 구현 예정)", "info");
  };

  // 페이지 진입 시 자동 로드
  useEffect(() => { fetchData(); }, [fetchData]);

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-lg font-bold text-gray-800">사양관리</h2>
        <div className="flex gap-2">
          <Button size="sm" onClick={handleAdd}>등록</Button>
          <Button size="sm" variant="danger" onClick={handleDelete}>삭제</Button>
          <Button size="sm" variant="secondary" onClick={fetchData}>조회</Button>
        </div>
      </div>

      <SearchForm onSearch={fetchData}>
        <SearchField label="프로젝트번호">
          <Input value={projectNo} onChange={(e) => setProjectNo(e.target.value)} className="w-[130px]" />
        </SearchField>
        <SearchField label="사양명">
          <Input value={specName} onChange={(e) => setSpecName(e.target.value)} className="w-[200px]" />
        </SearchField>
      </SearchForm>

      <DataGrid columns={columns} data={data} showCheckbox />
    </div>
  );
}