"use client";

/**
 * 외주품목정보 — 하드코딩 페이지
 *
 * 좌측: 품목 목록 (subcontractor_item_mapping 기반 품목, item_info 조인)
 * 우측: 선택한 품목의 외주업체 정보 (subcontractor_item_mapping → subcontractor_mng 조인)
 *
 * 외주업체관리와 양방향 연동 (같은 subcontractor_item_mapping 테이블)
 */

import React, { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Package, Users, Search, Settings2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { useAuth } from "@/hooks/useAuth";
import { toast } from "sonner";
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
import { useConfirmDialog } from "@/components/common/ConfirmDialog";
import { FullscreenDialog } from "@/components/common/FullscreenDialog";
import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
import { exportToExcel } from "@/lib/utils/excelExport";

const ITEM_TABLE = "item_info";
const MAPPING_TABLE = "subcontractor_item_mapping";
const SUBCONTRACTOR_TABLE = "subcontractor_mng";

// 좌측: 품목 컬럼
const LEFT_COLUMNS: DataGridColumn[] = [
  { key: "item_number", label: "품번", width: "w-[110px]" },
  { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
  { key: "size", label: "규격", width: "w-[90px]" },
  { key: "unit", label: "단위", width: "w-[60px]" },
  { key: "standard_price", label: "기준단가", width: "w-[90px]", formatNumber: true, align: "right" },
  { key: "selling_price", label: "판매가격", width: "w-[90px]", formatNumber: true, align: "right" },
  { key: "currency_code", label: "통화", width: "w-[50px]" },
  { key: "status", label: "상태", width: "w-[60px]" },
];

// 우측: 외주업체 정보 컬럼
const RIGHT_COLUMNS: DataGridColumn[] = [
  { key: "subcontractor_code", label: "외주업체코드", width: "w-[110px]" },
  { key: "subcontractor_name", label: "외주업체명", minWidth: "min-w-[120px]" },
  { key: "subcontractor_item_code", label: "외주품번", width: "w-[100px]" },
  { key: "subcontractor_item_name", label: "외주품명", width: "w-[100px]" },
  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
  { key: "currency_code", label: "통화", width: "w-[50px]" },
];

export default function SubcontractorItemPage() {
  const { user } = useAuth();
  const { confirm, ConfirmDialogComponent } = useConfirmDialog();

  // 좌측: 품목
  const [items, setItems] = useState<any[]>([]);
  const [itemLoading, setItemLoading] = useState(false);
  const [itemCount, setItemCount] = useState(0);
  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);

  // 우측: 외주업체
  const [subcontractorItems, setSubcontractorItems] = useState<any[]>([]);
  const [subcontractorLoading, setSubcontractorLoading] = useState(false);

  // 카테고리
  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});

  // 외주업체 추가 모달
  const [subSelectOpen, setSubSelectOpen] = useState(false);
  const [subSearchKeyword, setSubSearchKeyword] = useState("");
  const [subSearchResults, setSubSearchResults] = useState<any[]>([]);
  const [subSearchLoading, setSubSearchLoading] = useState(false);
  const [subCheckedIds, setSubCheckedIds] = useState<Set<string>>(new Set());

  // 품목 수정 모달
  const [editItemOpen, setEditItemOpen] = useState(false);
  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
  const [saving, setSaving] = useState(false);

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

  const applyTableSettings = useCallback((settings: TableSettings) => {
    setFilterConfig(settings.filters);
  }, []);

  useEffect(() => {
    const saved = loadTableSettings("subcontractor-item");
    if (saved) applyTableSettings(saved);
  }, []);

  // 카테고리 로드
  useEffect(() => {
    const load = async () => {
      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;
      };
      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
        try {
          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
        } catch { /* skip */ }
      }
      setCategoryOptions(optMap);
    };
    load();
  }, []);

  const resolve = (col: string, code: string) => {
    if (!code) return "";
    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
  };

  // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
  const outsourcingDivisionCode = categoryOptions["division"]?.find(
    (o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
  )?.code;

  const fetchItems = useCallback(async () => {
    setItemLoading(true);
    try {
      const filters: any[] = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
      // division = 외주관리 필터 추가
      if (outsourcingDivisionCode) {
        filters.push({ columnName: "division", operator: "equals", value: outsourcingDivisionCode });
      }
      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/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 CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
      const data = raw.map((r: any) => {
        const converted = { ...r };
        for (const col of CATS) {
          if (converted[col]) converted[col] = resolve(col, converted[col]);
        }
        return converted;
      });
      setItems(data);
      setItemCount(res.data?.data?.total || raw.length);
    } catch (err) {
      console.error("품목 조회 실패:", err);
      toast.error("품목 목록을 불러오는데 실패했습니다.");
    } finally {
      setItemLoading(false);
    }
  }, [searchFilters, categoryOptions, outsourcingDivisionCode]);

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

  // 선택된 품목
  const selectedItem = items.find((i) => i.id === selectedItemId);

  // 우측: 외주업체 목록 조회
  useEffect(() => {
    if (!selectedItem?.item_number) { setSubcontractorItems([]); return; }
    const itemKey = selectedItem.item_number;
    const fetchSubcontractorItems = async () => {
      setSubcontractorLoading(true);
      try {
        // subcontractor_item_mapping에서 해당 품목의 매핑 조회
        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
          page: 1, size: 500,
          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
          autoFilter: true,
        });
        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];

        // subcontractor_id → subcontractor_mng 조인 (외주업체명)
        const subIds = [...new Set(mappings.map((m: any) => m.subcontractor_id).filter(Boolean))];
        let subMap: Record<string, any> = {};
        if (subIds.length > 0) {
          try {
            const subRes = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
              page: 1, size: subIds.length + 10,
              dataFilter: { enabled: true, filters: [{ columnName: "subcontractor_code", operator: "in", value: subIds }] },
              autoFilter: true,
            });
            for (const s of (subRes.data?.data?.data || subRes.data?.data?.rows || [])) {
              subMap[s.subcontractor_code] = s;
            }
          } catch { /* skip */ }
        }

        setSubcontractorItems(mappings.map((m: any) => ({
          ...m,
          subcontractor_code: m.subcontractor_id,
          subcontractor_name: subMap[m.subcontractor_id]?.subcontractor_name || "",
        })));
      } catch (err) {
        console.error("외주업체 조회 실패:", err);
      } finally {
        setSubcontractorLoading(false);
      }
    };
    fetchSubcontractorItems();
  }, [selectedItem?.item_number]);

  // 외주업체 검색
  const searchSubcontractors = async () => {
    setSubSearchLoading(true);
    try {
      const filters: any[] = [];
      if (subSearchKeyword) filters.push({ columnName: "subcontractor_name", operator: "contains", value: subSearchKeyword });
      const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
        page: 1, size: 50,
        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
        autoFilter: true,
      });
      const all = res.data?.data?.data || res.data?.data?.rows || [];
      // 이미 등록된 외주업체 제외
      const existing = new Set(subcontractorItems.map((s: any) => s.subcontractor_id || s.subcontractor_code));
      setSubSearchResults(all.filter((s: any) => !existing.has(s.subcontractor_code)));
    } catch { /* skip */ } finally { setSubSearchLoading(false); }
  };

  // 외주업체 추가 저장
  const addSelectedSubcontractors = async () => {
    const selected = subSearchResults.filter((s) => subCheckedIds.has(s.id));
    if (selected.length === 0 || !selectedItem) return;
    try {
      for (const sub of selected) {
        await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
          subcontractor_id: sub.subcontractor_code,
          item_id: selectedItem.item_number,
        });
      }
      toast.success(`${selected.length}개 외주업체가 추가되었습니다.`);
      setSubCheckedIds(new Set());
      setSubSelectOpen(false);
      // 우측 새로고침
      const sid = selectedItemId;
      setSelectedItemId(null);
      setTimeout(() => setSelectedItemId(sid), 50);
    } catch (err: any) {
      toast.error(err.response?.data?.message || "외주업체 추가에 실패했습니다.");
    }
  };

  // 품목 수정
  const openEditItem = () => {
    if (!selectedItem) return;
    setEditItemForm({ ...selectedItem });
    setEditItemOpen(true);
  };

  const handleEditSave = async () => {
    if (!editItemForm.id) return;
    setSaving(true);
    try {
      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
        originalData: { id: editItemForm.id },
        updatedData: {
          selling_price: editItemForm.selling_price || null,
          standard_price: editItemForm.standard_price || null,
          currency_code: editItemForm.currency_code || null,
        },
      });
      toast.success("수정되었습니다.");
      setEditItemOpen(false);
      fetchItems();
    } catch (err: any) {
      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
    } finally {
      setSaving(false);
    }
  };

  // 엑셀 다운로드
  const handleExcelDownload = async () => {
    if (items.length === 0) return;
    const data = items.map((i) => ({
      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
      기준단가: i.standard_price, 판매가격: i.selling_price, 통화: i.currency_code, 상태: i.status,
    }));
    await exportToExcel(data, "외주품목정보.xlsx", "외주품목");
    toast.success("다운로드 완료");
  };

  return (
    <div className="flex h-full flex-col gap-3 p-3">
      {/* 검색 */}
      <DynamicSearchFilter
        tableName={ITEM_TABLE}
        filterId="subcontractor-item"
        onFilterChange={setSearchFilters}
        dataCount={itemCount}
        externalFilterConfig={filterConfig}
        extraActions={
          <div className="flex gap-1.5">
            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
            </Button>
            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
            </Button>
            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
            </Button>
          </div>
        }
      />

      {/* 분할 패널 */}
      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
        <ResizablePanelGroup direction="horizontal">
          {/* 좌측: 외주품목 목록 */}
          <ResizablePanel defaultSize={55} minSize={30}>
            <div className="flex flex-col h-full">
              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
                <div className="font-semibold flex items-center gap-2 text-sm">
                  <Package className="w-4 h-4" /> 외주품목 목록
                  <Badge variant="secondary" className="font-normal">{itemCount}건</Badge>
                </div>
                <div className="flex gap-1.5">
                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
                  </Button>
                </div>
              </div>
              <DataGrid
                gridId="subcontractor-item-left"
                columns={LEFT_COLUMNS}
                data={items}
                loading={itemLoading}
                selectedId={selectedItemId}
                onSelect={setSelectedItemId}
                onRowDoubleClick={() => openEditItem()}
                emptyMessage="등록된 외주품목이 없습니다"
              />
            </div>
          </ResizablePanel>

          <ResizableHandle withHandle />

          {/* 우측: 외주업체 정보 */}
          <ResizablePanel defaultSize={45} minSize={25}>
            <div className="flex flex-col h-full">
              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
                <div className="font-semibold flex items-center gap-2 text-sm">
                  <Users className="w-4 h-4" /> 외주업체 정보
                  {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
                </div>
                <Button variant="outline" size="sm" disabled={!selectedItemId}
                  onClick={() => { setSubCheckedIds(new Set()); setSubSelectOpen(true); searchSubcontractors(); }}>
                  <Plus className="w-3.5 h-3.5 mr-1" /> 외주업체 추가
                </Button>
              </div>
              {!selectedItemId ? (
                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
                  좌측에서 품목을 선택하세요
                </div>
              ) : (
                <DataGrid
                  gridId="subcontractor-item-right"
                  columns={RIGHT_COLUMNS}
                  data={subcontractorItems}
                  loading={subcontractorLoading}
                  showRowNumber={false}
                  emptyMessage="등록된 외주업체가 없습니다"
                />
              )}
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>

      {/* 품목 수정 모달 */}
      <FullscreenDialog
        open={editItemOpen}
        onOpenChange={setEditItemOpen}
        title="외주품목 수정"
        description={`${editItemForm.item_number || ""} — ${editItemForm.item_name || ""}`}
        defaultMaxWidth="max-w-2xl"
        footer={
          <>
            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
            <Button onClick={handleEditSave} disabled={saving}>
              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
            </Button>
          </>
        }
      >
        <div className="grid grid-cols-2 gap-4 py-4">
          {[
            { key: "item_number", label: "품목코드" },
            { key: "item_name", label: "품명" },
            { key: "size", label: "규격" },
            { key: "unit", label: "단위" },
            { key: "material", label: "재질" },
            { key: "status", label: "상태" },
          ].map((f) => (
            <div key={f.key} className="space-y-1.5">
              <Label className="text-sm text-muted-foreground">{f.label}</Label>
              <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
            </div>
          ))}

          <div className="col-span-2 border-t my-2" />

          <div className="space-y-1.5">
            <Label className="text-sm">판매가격</Label>
            <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
              placeholder="판매가격" className="h-9" />
          </div>
          <div className="space-y-1.5">
            <Label className="text-sm">기준단가</Label>
            <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
              placeholder="기준단가" className="h-9" />
          </div>
          <div className="space-y-1.5">
            <Label className="text-sm">통화</Label>
            <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
              <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
              <SelectContent>
                {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
              </SelectContent>
            </Select>
          </div>
        </div>
      </FullscreenDialog>

      {/* 외주업체 추가 모달 */}
      <Dialog open={subSelectOpen} onOpenChange={setSubSelectOpen}>
        <DialogContent className="max-w-2xl max-h-[70vh]">
          <DialogHeader>
            <DialogTitle>외주업체 선택</DialogTitle>
            <DialogDescription>품목에 추가할 외주업체를 선택하세요.</DialogDescription>
          </DialogHeader>
          <div className="flex gap-2 mb-3">
            <Input placeholder="외주업체명 검색" value={subSearchKeyword}
              onChange={(e) => setSubSearchKeyword(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && searchSubcontractors()}
              className="h-9 flex-1" />
            <Button size="sm" onClick={searchSubcontractors} disabled={subSearchLoading} className="h-9">
              {subSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
            </Button>
          </div>
          <div className="overflow-auto max-h-[350px] border rounded-lg">
            <Table>
              <TableHeader className="sticky top-0 bg-background z-10">
                <TableRow>
                  <TableHead className="w-[40px] text-center">
                    <input type="checkbox"
                      checked={subSearchResults.length > 0 && subCheckedIds.size === subSearchResults.length}
                      onChange={(e) => {
                        if (e.target.checked) setSubCheckedIds(new Set(subSearchResults.map((s) => s.id)));
                        else setSubCheckedIds(new Set());
                      }} />
                  </TableHead>
                  <TableHead className="w-[110px]">외주업체코드</TableHead>
                  <TableHead className="min-w-[130px]">외주업체명</TableHead>
                  <TableHead className="w-[80px]">거래유형</TableHead>
                  <TableHead className="w-[80px]">담당자</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {subSearchResults.length === 0 ? (
                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
                ) : subSearchResults.map((s) => (
                  <TableRow key={s.id} className={cn("cursor-pointer", subCheckedIds.has(s.id) && "bg-primary/5")}
                    onClick={() => setSubCheckedIds((prev) => {
                      const next = new Set(prev);
                      if (next.has(s.id)) next.delete(s.id); else next.add(s.id);
                      return next;
                    })}>
                    <TableCell className="text-center"><input type="checkbox" checked={subCheckedIds.has(s.id)} readOnly /></TableCell>
                    <TableCell className="text-xs">{s.subcontractor_code}</TableCell>
                    <TableCell className="text-sm">{s.subcontractor_name}</TableCell>
                    <TableCell className="text-xs">{s.division}</TableCell>
                    <TableCell className="text-xs">{s.contact_person}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
          <DialogFooter>
            <div className="flex items-center gap-2 w-full justify-between">
              <span className="text-sm text-muted-foreground">{subCheckedIds.size}개 선택됨</span>
              <div className="flex gap-2">
                <Button variant="outline" onClick={() => setSubSelectOpen(false)}>취소</Button>
                <Button onClick={addSelectedSubcontractors} disabled={subCheckedIds.size === 0}>
                  <Plus className="w-4 h-4 mr-1" /> {subCheckedIds.size}개 추가
                </Button>
              </div>
            </div>
          </DialogFooter>
        </DialogContent>
      </Dialog>

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

      <TableSettingsModal
        open={tableSettingsOpen}
        onOpenChange={setTableSettingsOpen}
        tableName={ITEM_TABLE}
        settingsId="subcontractor-item"
        onSave={applyTableSettings}
      />

      {ConfirmDialogComponent}
    </div>
  );
}
