"use client";

import { useState, useCallback, useEffect } from "react";
import Swal from "sweetalert2";
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 { CodeSelect } from "@/components/ui/code-select";
import { FolderCell } from "@/components/ui/folder-cell";

// productionplanning/releaseMgmtList.jsp 대응 - 생산관리_출고관리
function openPopup(url: string, name: string, w: number, h: number) {
  const left = (window.screen.width - w) / 2;
  const top = (window.screen.height - h) / 2;
  window.open(url, name, `width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`);
}

export default function ProductionReleasePage() {
  const [year, setYear] = useState(new Date().getFullYear().toString());
  const [projectNo, setProjectNo] = useState("");
  const [customerObjid, setCustomerObjid] = useState("");
  const [product, setProduct] = useState("");
  const [pmUserId, setPmUserId] = useState("");
  const [data, setData] = useState<Record<string, unknown>[]>([]);
  const [selected, setSelected] = useState<Record<string, unknown>[]>([]);

  const openProjectForm = (objId: string) =>
    openPopup(`/project/modify?objId=${encodeURIComponent(objId)}`, "projectForm", 520, 650);
  const openReleaseForm = (row: Record<string, unknown>) => {
    const rObj = row.RELEASE_OBJID ? String(row.RELEASE_OBJID) : "";
    const qs = new URLSearchParams({
      parentObjId: String(row.OBJID || ""),
      product: String(row.PRODUCT || ""),
      productGroup: String(row.PRODUCT_GROUP || ""),
      ...(rObj ? { objId: rObj } : {}),
    }).toString();
    openPopup(`/production/release/form?${qs}`, "releaseForm", 900, 500);
  };
  const openInspection = (objId: string) =>
    openPopup(`/production/inspection-popup?objId=${encodeURIComponent(objId)}`, "inspection", 1300, 700);
  const openFiles = (targetObjId: string, docType: string, docTypeName: string) =>
    openPopup(
      `/common/files?targetObjId=${encodeURIComponent(targetObjId)}&docType=${encodeURIComponent(docType)}&docTypeName=${encodeURIComponent(docTypeName)}`,
      "filePopup", 800, 500
    );

  const handleRegister = () => {
    if (selected.length === 0) {
      Swal.fire({ icon: "warning", title: "선택된 내용이 없습니다." });
      return;
    }
    if (selected.length > 1) {
      Swal.fire({ icon: "warning", title: "한번에 1개의 내용만 등록 가능합니다." });
      return;
    }
    openReleaseForm(selected[0]);
  };

  const columns: GridColumn[] = [
    {
      title: "프로젝트정보",
      columns: [
        { title: "프로젝트번호", field: "PROJECT_NO", width: 120, hozAlign: "center", frozen: true,
          cellClick: (row) => openProjectForm(String(row.OBJID)) },
        { title: "고객사", field: "CUSTOMER_NAME", width: 140, hozAlign: "left" },
        { title: "당사프로젝트명", field: "PROJECT_NAME", width: 230, hozAlign: "left" },
        { title: "요청납기일", field: "REQ_DEL_DATE", width: 100, hozAlign: "center" },
        { title: "셋업지", field: "SETUP", width: 130, hozAlign: "center" },
        { title: "PM", field: "PM_USER_NAME", width: 100, hozAlign: "center" },
      ],
    },
    {
      title: "출고관리",
      columns: [
        {
          title: "검사결과",
          columns: [
            { title: "체크리스트", field: "INSPECTION_CNT", width: 100, hozAlign: "center",
              formatter: (v) => <FolderCell count={v} />,
              cellClick: (row) => openInspection(String(row.OBJID)) },
            { title: "입회검사", field: "ADMISSION_INSPECTION_CNT", width: 100, hozAlign: "center",
              formatter: (v) => <FolderCell count={v} />,
              cellClick: (row) => openFiles(String(row.OBJID), "ADMISSION_INSPECTION_FILE", "입회검사") },
          ],
        },
        {
          title: "출고내역",
          columns: [
            { title: "출하지시서", field: "RELEASE_ORDER_CNT", width: 100, hozAlign: "center",
              formatter: (v) => <FolderCell count={v} />,
              cellClick: (row) => {
                const rObj = row.RELEASE_OBJID ? String(row.RELEASE_OBJID) : "";
                if (!rObj) {
                  Swal.fire({ icon: "info", title: "출고 등록 후 첨부 가능합니다." });
                  return;
                }
                openFiles(rObj, "RELEASE_ORDER", "출하지시서");
              } },
            { title: "출고일", field: "RELEASE_DATE", width: 100, hozAlign: "center" },
            { title: "담당자", field: "RELEASE_WRITER", width: 100, hozAlign: "center" },
            { title: "상태", field: "RELEASE_STATUS_TITLE", width: 90, hozAlign: "center" },
          ],
        },
      ],
    },
  ];

  const fetchData = useCallback(async () => {
    const res = await fetch("/api/production/release", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ year, project_no: projectNo, customer_objid: customerObjid, product, pm_user_id: pmUserId }),
    });
    if (res.ok) {
      const json = await res.json();
      setData(json.RESULTLIST || []);
    }
  }, [year, projectNo, customerObjid, product, pmUserId]);

  useEffect(() => { fetchData(); }, [fetchData]);

  useEffect(() => {
    (window as unknown as { fn_search?: () => void }).fn_search = fetchData;
    return () => { delete (window as unknown as { fn_search?: () => void }).fn_search; };
  }, [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={handleRegister}>등록</Button>
          <Button size="sm" variant="secondary" onClick={fetchData}>조회</Button>
        </div>
      </div>

      <SearchForm onSearch={fetchData}>
        <SearchField label="년도">
          <select value={year} onChange={(e) => setYear(e.target.value)}
            className="h-9 w-[100px] rounded border border-gray-300 bg-white px-3 text-sm">
            <option value="">선택</option>
            {Array.from({ length: 5 }, (_, i) => new Date().getFullYear() - i).map((y) => (
              <option key={y} value={y}>{y}</option>
            ))}
          </select>
        </SearchField>
        <SearchField label="프로젝트번호">
          <Input value={projectNo} onChange={(e) => setProjectNo(e.target.value)} className="w-[180px]" />
        </SearchField>
        <SearchField label="고객사">
          <CodeSelect codeId="CUSTOMER" value={customerObjid} onChange={setCustomerObjid} className="w-[160px]" />
        </SearchField>
        <SearchField label="제품구분">
          <CodeSelect codeId="PRODUCT_TYPE" value={product} onChange={setProduct} className="w-[130px]" />
        </SearchField>
        <SearchField label="PM">
          <CodeSelect codeId="PM_USER" value={pmUserId} onChange={setPmUserId} className="w-[130px]" />
        </SearchField>
      </SearchForm>

      <DataGrid
        columns={columns}
        data={data}
        showCheckbox

        onSelectionChange={setSelected}
      />
    </div>
  );
}