wace_rps/frontend/app/(main)/COMPANY_16/master-data/item-info/page.tsx

"use client";

import React, { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
import { exportToExcel } from "@/lib/utils/excelExport";
import {
  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
  Pencil, Copy, Settings2,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { useAuth } from "@/hooks/useAuth";
import { useTableSettings } from "@/hooks/useTableSettings";
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
import { toast } from "sonner";

const TABLE_NAME = "item_info";

const GRID_COLUMNS = [
  { key: "item_number", label: "품목코드" },
  { key: "item_name", label: "품명" },
  { key: "division", label: "관리품목" },
  { key: "type", label: "품목구분" },
  { key: "size", label: "규격" },
  { key: "unit", label: "단위" },
  { key: "material", label: "재질" },
  { key: "status", label: "상태" },
  { key: "selling_price", label: "판매가격", align: "right" as const },
  { key: "standard_price", label: "기준단가", align: "right" as const },
  { key: "weight", label: "중량", align: "right" as const },
  { key: "inventory_unit", label: "재고단위" },
  { key: "user_type01", label: "대분류" },
  { key: "user_type02", label: "중분류" },
];

const FORM_FIELDS = [
  { key: "item_number", label: "품목코드", type: "text", required: true, disabled: true, placeholder: "자동 채번" },
  { key: "item_name", label: "품명", type: "text", required: true },
  { key: "division", label: "관리품목", type: "category" },
  { key: "type", label: "품목구분", type: "category" },
  { key: "size", label: "규격", type: "text" },
  { key: "unit", label: "단위", type: "category" },
  { key: "material", label: "재질", type: "category" },
  { key: "status", label: "상태", type: "category" },
  { key: "weight", label: "중량", type: "text", placeholder: "숫자 입력 (예: 3.5)" },
  { key: "volum", label: "부피", type: "text", placeholder: "숫자 입력 (예: 100)" },
  { key: "specific_gravity", label: "비중", type: "text", placeholder: "숫자 입력 (예: 7.85)" },
  { key: "inventory_unit", label: "재고단위", type: "category" },
  { key: "selling_price", label: "판매가격", type: "text" },
  { key: "standard_price", label: "기준단가", type: "text" },
  { key: "currency_code", label: "통화", type: "category" },
  { key: "user_type01", label: "대분류", type: "category" },
  { key: "user_type02", label: "중분류", type: "category" },
  { key: "meno", label: "메모", type: "textarea" },
];

const CATEGORY_COLUMNS = [
  "division", "type", "unit", "material", "status",
  "inventory_unit", "currency_code", "user_type01", "user_type02",
];

export default function ItemInfoPage() {
  const { user } = useAuth();
  const ts = useTableSettings("c16-item-info", TABLE_NAME, GRID_COLUMNS);
  const [items, setItems] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  // 검색 필터 (DynamicSearchFilter)
  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);

  // 모달
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const [editId, setEditId] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [formData, setFormData] = useState<Record<string, any>>({});

  // 엑셀 업로드
  const [excelUploadOpen, setExcelUploadOpen] = useState(false);

  // 카테고리 옵션 (API에서 로드)
  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});

  // 선택된 행
  const [selectedId, setSelectedId] = useState<string | null>(null);

  // 카테고리 옵션 로드
  useEffect(() => {
    const loadCategories = async () => {
      try {
        const optMap: Record<string, { code: string; label: string }[]> = {};
        const flatten = (vals: any[]): { code: string; label: string }[] => {
          const result: { code: string; label: string }[] = [];
          for (const v of vals) {
            result.push({ code: v.valueCode, label: v.valueLabel });
            if (v.children?.length) result.push(...flatten(v.children));
          }
          return result;
        };

        await Promise.all(
          CATEGORY_COLUMNS.map(async (colName) => {
            try {
              const res = await apiClient.get(`/table-categories/${TABLE_NAME}/${colName}/values`);
              if (res.data?.success && res.data.data?.length > 0) {
                optMap[colName] = flatten(res.data.data);
              }
            } catch { /* skip */ }
          })
        );
        setCategoryOptions(optMap);
      } catch (err) {
        console.error("카테고리 로드 실패:", err);
      }
    };
    loadCategories();
  }, []);

  // 데이터 조회
  const fetchItems = useCallback(async () => {
    setLoading(true);
    try {
      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
        page: 1,
        size: 500,
        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
        autoFilter: true,
      });

      const raw = res.data?.data?.data || res.data?.data?.rows || [];
      const resolve = (col: string, code: string) => {
        if (!code) return "";
        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
      };
      const data = raw.map((r: any) => {
        const converted = { ...r };
        for (const col of CATEGORY_COLUMNS) {
          if (converted[col]) converted[col] = resolve(col, converted[col]);
        }
        return converted;
      });
      setItems(data);
    } catch (err) {
      console.error("품목 조회 실패:", err);
      toast.error("품목 목록을 불러오는데 실패했어요.");
    } finally {
      setLoading(false);
    }
  }, [categoryOptions, searchFilters]);

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

  // 등록 모달 열기
  const openRegisterModal = () => {
    setFormData({});
    setIsEditMode(false);
    setEditId(null);
    setIsModalOpen(true);
  };

  // 수정 모달 열기
  const openEditModal = (item: any) => {
    setFormData({ ...item });
    setIsEditMode(true);
    setEditId(item.id);
    setIsModalOpen(true);
  };

  // 복사 모달 열기
  const openCopyModal = (item: any) => {
    const { id, item_number, created_date, updated_date, writer, ...rest } = item;
    setFormData(rest);
    setIsEditMode(false);
    setEditId(null);
    setIsModalOpen(true);
  };

  // 저장
  const handleSave = async () => {
    if (!formData.item_name) {
      toast.error("품명은 필수 입력이에요.");
      return;
    }

    setSaving(true);
    try {
      if (isEditMode && editId) {
        const { id, created_date, updated_date, writer, company_code, ...updateFields } = formData;
        await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
          originalData: { id: editId },
          updatedData: updateFields,
        });
        toast.success("수정되었어요.");
      } else {
        const { id, created_date, updated_date, ...insertFields } = formData;
        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, { id: crypto.randomUUID(), ...insertFields });
        toast.success("등록되었어요.");
      }
      setIsModalOpen(false);
      fetchItems();
    } catch (err: any) {
      console.error("저장 실패:", err);
      toast.error(err.response?.data?.message || "저장에 실패했어요.");
    } finally {
      setSaving(false);
    }
  };

  // 삭제
  const handleDelete = async () => {
    if (!selectedId) {
      toast.error("삭제할 품목을 선택해 주세요.");
      return;
    }
    if (!confirm("선택한 품목을 삭제할까요?")) return;

    try {
      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
        data: [{ id: selectedId }],
      });
      toast.success("삭제되었어요.");
      setSelectedId(null);
      fetchItems();
    } catch (err) {
      console.error("삭제 실패:", err);
      toast.error("삭제에 실패했어요.");
    }
  };

  // 엑셀 다운로드
  const handleExcelDownload = async () => {
    if (items.length === 0) {
      toast.error("다운로드할 데이터가 없어요.");
      return;
    }
    const exportData = items.map((item) => {
      const row: Record<string, any> = {};
      for (const col of GRID_COLUMNS) {
        row[col.label] = item[col.key] || "";
      }
      return row;
    });
    await exportToExcel(exportData, "품목정보.xlsx", "품목정보");
    toast.success("엑셀 다운로드 완료");
  };

  return (
    <div className="flex h-full flex-col gap-0">
      {/* 검색 필터 바 */}
      <DynamicSearchFilter
        tableName={TABLE_NAME}
        filterId="c16-item-info"
        onFilterChange={setSearchFilters}
        externalFilterConfig={ts.filterConfig}
      />

      {/* 액션 바 */}
      <div className="flex items-center justify-between px-4 py-2.5 border-b">
        <div className="flex items-center gap-2">
          <span className="text-sm font-semibold">품목 관리</span>
          <Badge variant="secondary" className="font-mono text-xs">{items.length}건</Badge>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
            <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
          </Button>
          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
            <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
          </Button>
          <div className="mx-1 h-5 w-px bg-border" />
          <Button size="sm" onClick={openRegisterModal}>
            <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={!selectedId}
            onClick={() => {
              const item = items.find((i) => i.id === selectedId);
              if (item) openCopyModal(item);
            }}
          >
            <Copy className="w-4 h-4 mr-1.5" /> 복사
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={!selectedId}
            onClick={() => {
              const item = items.find((i) => i.id === selectedId);
              if (item) openEditModal(item);
            }}
          >
            <Pencil className="w-4 h-4 mr-1.5" /> 수정
          </Button>
          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
          </Button>
          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
            <Settings2 className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* 메인 테이블 */}
      <div className="flex-1 overflow-auto">
        {loading ? (
          <div className="flex h-full items-center justify-center">
            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
          </div>
        ) : items.length === 0 ? (
          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
            등록된 품목이 없어요
          </div>
        ) : (
          <Table>
            <TableHeader className="sticky top-0 z-10">
              <TableRow className="bg-muted hover:bg-muted">
                <TableHead className="w-10 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
                {ts.visibleColumns.map((col) => (
                  <TableHead
                    key={col.key}
                    className={cn(
                      "whitespace-nowrap text-xs",
                      col.align === "right" && "text-right"
                    )}
                  >
                    {col.label}
                  </TableHead>
                ))}
              </TableRow>
            </TableHeader>
            <TableBody>
              {items.map((item, idx) => (
                <TableRow
                  key={item.id ?? idx}
                  className={cn(
                    "cursor-pointer text-sm",
                    selectedId === item.id && "bg-primary/10"
                  )}
                  onClick={() => setSelectedId(item.id)}
                  onDoubleClick={() => openEditModal(item)}
                >
                  <TableCell className="text-center text-[13px] text-muted-foreground">{idx + 1}</TableCell>
                  {ts.visibleColumns.map((col) => (
                    <TableCell
                      key={col.key}
                      className={cn(
                        "whitespace-nowrap max-w-[160px] truncate",
                        col.align === "right" && "text-right tabular-nums"
                      )}
                    >
                      {item[col.key] ?? ""}
                    </TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </div>

      {/* 등록/수정 모달 */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="sm:max-w-[600px] w-[95vw] max-h-[90vh] flex flex-col p-0 overflow-hidden">
          <DialogHeader className="shrink-0 px-6 pt-5 pb-3 border-b">
            <DialogTitle>{isEditMode ? "품목 수정" : "품목 등록"}</DialogTitle>
            <DialogDescription>
              {isEditMode ? "품목 정보를 수정해요." : "새로운 품목을 등록해요."}
            </DialogDescription>
          </DialogHeader>

          <div className="flex-1 overflow-y-auto">
            <div className="grid grid-cols-2 gap-4 p-6">
              {FORM_FIELDS.map((field) => (
                <div
                  key={field.key}
                  className={cn("space-y-1.5", field.type === "textarea" && "col-span-2")}
                >
                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    {field.label}
                    {field.required && <span className="text-destructive ml-1">*</span>}
                  </Label>
                  {field.type === "category" ? (
                    <Select
                      value={formData[field.key] || ""}
                      onValueChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
                    >
                      <SelectTrigger className="h-9 w-full">
                        <SelectValue placeholder={`${field.label} 선택`} />
                      </SelectTrigger>
                      <SelectContent>
                        {(categoryOptions[field.key] || []).map((opt) => (
                          <SelectItem key={opt.code} value={opt.code}>
                            {opt.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  ) : field.type === "textarea" ? (
                    <Textarea
                      value={formData[field.key] || ""}
                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
                      placeholder={field.label}
                      rows={3}
                    />
                  ) : (
                    <Input
                      value={formData[field.key] || ""}
                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
                      placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
                      disabled={field.disabled && !isEditMode}
                      className="h-9"
                    />
                  )}
                </div>
              ))}
            </div>
          </div>

          <DialogFooter className="shrink-0 border-t px-6 py-3">
            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
            <Button onClick={handleSave} disabled={saving}>
              {saving
                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
                : <Save className="w-4 h-4 mr-1.5" />
              }
              저장
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 테이블 설정 모달 */}
      <TableSettingsModal
        open={ts.open}
        onOpenChange={ts.setOpen}
        tableName={ts.tableName}
        settingsId={ts.settingsId}
        defaultVisibleKeys={ts.defaultVisibleKeys}
        onSave={ts.applySettings}
      />

      {/* 엑셀 업로드 모달 */}
      <ExcelUploadModal
        open={excelUploadOpen}
        onOpenChange={setExcelUploadOpen}
        tableName={TABLE_NAME}
        userId={user?.userId}
        onSuccess={() => {
          fetchItems();
        }}
      />
    </div>
  );
}