"use client";

import React, { useState, useMemo, useCallback, useEffect } from "react";
import {
  Plus,
  Pencil,
  Trash2,
  Calendar,
  Upload,
  Ruler,
  FileText,
  Loader2,
  Inbox,
  Save,
  Settings2,
} from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
import {
  getDesignRequestList,
  createDesignRequest,
  updateDesignRequest,
  deleteDesignRequest,
} from "@/lib/api/design";
import { useTableSettings } from "@/hooks/useTableSettings";
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";

// ========== 타입 ==========
interface HistoryItem {
  id?: string;
  step: string;
  history_date: string;
  user_name: string;
  description: string;
}

interface DesignRequest {
  id: string;
  request_no: string;
  source_type: string;
  request_date: string;
  due_date: string;
  design_type: string;
  priority: string;
  status: string;
  approval_step: string;
  target_name: string;
  customer: string;
  req_dept: string;
  requester: string;
  designer: string;
  order_no: string;
  spec: string;
  change_type: string;
  drawing_no: string;
  urgency: string;
  reason: string;
  content: string;
  apply_timing: string;
  review_memo: string;
  project_id: string;
  ecn_no: string;
  created_date: string;
  updated_date: string;
  writer: string;
  company_code: string;
  history: HistoryItem[];
  impact: string[];
}

// ========== 스타일 맵 ==========
const STATUS_STYLES: Record<string, string> = {
  신규접수: "bg-muted text-foreground",
  접수대기: "bg-muted text-foreground",
  검토중: "bg-warning/10 text-warning",
  설계진행: "bg-info/10 text-info",
  설계검토: "bg-primary/10 text-primary",
  출도완료: "bg-success/10 text-success",
  반려: "bg-destructive/10 text-destructive",
  종료: "bg-muted text-muted-foreground",
};

const TYPE_STYLES: Record<string, string> = {
  신규설계: "bg-info/10 text-info",
  유사설계: "bg-success/10 text-success",
  개조설계: "bg-warning/10 text-warning",
};

const PRIORITY_STYLES: Record<string, string> = {
  긴급: "bg-destructive/10 text-destructive",
  높음: "bg-warning/10 text-warning",
  보통: "bg-muted text-foreground",
  낮음: "bg-success/10 text-success",
};

const STATUS_PROGRESS: Record<string, number> = {
  신규접수: 0,
  접수대기: 0,
  검토중: 20,
  설계진행: 50,
  설계검토: 80,
  출도완료: 100,
  반려: 0,
  종료: 100,
};

function getProgressColor(p: number) {
  if (p >= 100) return "bg-success";
  if (p >= 60) return "bg-warning";
  if (p >= 20) return "bg-info";
  return "bg-muted";
}

function getProgressTextColor(p: number) {
  if (p >= 100) return "text-success";
  if (p >= 60) return "text-warning";
  if (p >= 20) return "text-info";
  return "text-muted-foreground";
}

const INITIAL_FORM = {
  request_no: "",
  request_date: "",
  due_date: "",
  design_type: "",
  priority: "보통",
  target_name: "",
  customer: "",
  req_dept: "",
  requester: "",
  designer: "",
  order_no: "",
  spec: "",
  drawing_no: "",
  content: "",
};

// ========== Grid Columns ==========
const DR_GRID_COLUMNS = [
  { key: "request_no", label: "의뢰번호" },
  { key: "design_type", label: "유형" },
  { key: "status", label: "상태" },
  { key: "priority", label: "우선순위" },
  { key: "target_name", label: "설비/제품명" },
  { key: "customer", label: "고객명" },
  { key: "designer", label: "설계담당" },
  { key: "due_date", label: "납기" },
  { key: "progress", label: "진행률" },
];

// ========== 메인 컴포넌트 ==========
export default function DesignRequestPage() {
  const ts = useTableSettings("c16-design-request", "dsn_design_request", DR_GRID_COLUMNS);
  const [requests, setRequests] = useState<DesignRequest[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [detailOpen, setDetailOpen] = useState(false);

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

  const [modalOpen, setModalOpen] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState(INITIAL_FORM);

  const today = useMemo(() => new Date(), []);

  // 데이터 조회
  const fetchRequests = useCallback(async () => {
    setLoading(true);
    try {
      const params: Record<string, string> = { source_type: "dr" };
      const res = await getDesignRequestList(params);
      if (res.success && res.data) {
        setRequests(res.data);
      } else {
        setRequests([]);
      }
    } catch {
      setRequests([]);
    } finally {
      setLoading(false);
    }
  }, []);

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

  // 클라이언트 사이드 필터링 (DynamicSearchFilter)
  const filteredRequests = useMemo(() => {
    if (searchFilters.length === 0) return requests;
    return requests.filter((item) => {
      for (const f of searchFilters) {
        const val = item[f.columnName as keyof DesignRequest];
        const strVal = val !== undefined && val !== null ? (Array.isArray(val) ? val.join(",") : String(val)) : "";
        if (f.operator === "contains") {
          if (!strVal.toLowerCase().includes(f.value.toLowerCase())) return false;
        } else if (f.operator === "equals") {
          if (strVal !== f.value) return false;
        } else if (f.operator === "in") {
          const allowed = f.value.split("|");
          if (!allowed.includes(strVal)) return false;
        } else if (f.operator === "between") {
          const [from, to] = f.value.split("|");
          if (from && strVal < from) return false;
          if (to && strVal > to) return false;
        }
      }
      return true;
    });
  }, [requests, searchFilters]);

  const selectedItem = useMemo(() => {
    if (!selectedId) return null;
    return requests.find((r) => r.id === selectedId) || null;
  }, [selectedId, requests]);

  const statusCounts = useMemo(() => {
    return {
      접수대기: requests.filter((r) => r.status === "접수대기" || r.status === "신규접수").length,
      설계진행: requests.filter((r) => r.status === "설계진행").length,
      출도완료: requests.filter((r) => r.status === "출도완료").length,
    };
  }, [requests]);


  // 채번: 기존 데이터 기반으로 다음 번호 생성
  const generateNextNo = useCallback(() => {
    const year = new Date().getFullYear();
    const existing = requests.filter((r) => r.request_no?.startsWith(`DR-${year}-`));
    const maxNum = existing.reduce((max, r) => {
      const parts = r.request_no?.split("-");
      const num = parts?.length >= 3 ? parseInt(parts[2]) : 0;
      return num > max ? num : max;
    }, 0);
    return `DR-${year}-${String(maxNum + 1).padStart(4, "0")}`;
  }, [requests]);

  const handleOpenRegister = useCallback(() => {
    setIsEditMode(false);
    setEditingId(null);
    setForm({
      ...INITIAL_FORM,
      request_no: generateNextNo(),
      request_date: new Date().toISOString().split("T")[0],
    });
    setModalOpen(true);
  }, [generateNextNo]);

  const handleOpenEdit = useCallback(() => {
    if (!selectedItem) return;
    setIsEditMode(true);
    setEditingId(selectedItem.id);
    setForm({
      request_no: selectedItem.request_no || "",
      request_date: selectedItem.request_date || "",
      due_date: selectedItem.due_date || "",
      design_type: selectedItem.design_type || "",
      priority: selectedItem.priority || "보통",
      target_name: selectedItem.target_name || "",
      customer: selectedItem.customer || "",
      req_dept: selectedItem.req_dept || "",
      requester: selectedItem.requester || "",
      designer: selectedItem.designer || "",
      order_no: selectedItem.order_no || "",
      spec: selectedItem.spec || "",
      drawing_no: selectedItem.drawing_no || "",
      content: selectedItem.content || "",
    });
    setDetailOpen(false);
    setModalOpen(true);
  }, [selectedItem]);

  const handleSave = useCallback(async () => {
    if (!form.target_name.trim()) { toast.error("설비/제품명을 입력해 주세요."); return; }
    if (!form.design_type) { toast.error("의뢰 유형을 선택해 주세요."); return; }
    if (!form.due_date) { toast.error("납기를 입력해 주세요."); return; }
    if (!form.spec.trim()) { toast.error("요구사양을 입력해 주세요."); return; }

    setSaving(true);
    try {
      const payload = {
        request_no: form.request_no,
        source_type: "dr",
        request_date: form.request_date,
        due_date: form.due_date,
        design_type: form.design_type,
        priority: form.priority,
        target_name: form.target_name,
        customer: form.customer,
        req_dept: form.req_dept,
        requester: form.requester,
        designer: form.designer,
        order_no: form.order_no,
        spec: form.spec,
        drawing_no: form.drawing_no,
        content: form.content,
      };

      let res;
      if (isEditMode && editingId) {
        res = await updateDesignRequest(editingId, payload);
      } else {
        res = await createDesignRequest({
          ...payload,
          status: "신규접수",
          history: [{
            step: "신규접수",
            history_date: form.request_date || new Date().toISOString().split("T")[0],
            user_name: form.requester || "시스템",
            description: `${form.req_dept || ""}에서 설계의뢰 등록`,
          }],
        });
      }

      if (res.success) {
        toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
        setModalOpen(false);
        await fetchRequests();
        if (isEditMode && editingId) {
          setSelectedId(editingId);
        } else if (res.data?.id) {
          setSelectedId(res.data.id);
        }
      } else {
        toast.error(res.message || "저장에 실패했어요.");
      }
    } catch (err: any) {
      toast.error("저장에 실패했어요.");
    } finally {
      setSaving(false);
    }
  }, [form, isEditMode, editingId, fetchRequests]);

  const handleDelete = useCallback(async () => {
    if (!selectedId || !selectedItem) return;
    const displayNo = selectedItem.request_no || selectedId;
    if (!confirm(`${displayNo} 설계의뢰를 삭제할까요?`)) return;

    try {
      const res = await deleteDesignRequest(selectedId);
      if (res.success) {
        toast.success("삭제되었어요.");
        setSelectedId(null);
        setDetailOpen(false);
        await fetchRequests();
      } else {
        toast.error(res.message || "삭제에 실패했어요.");
      }
    } catch (err: any) {
      toast.error("삭제에 실패했어요.");
    }
  }, [selectedId, selectedItem, fetchRequests]);

  const getDueDateInfo = useCallback(
    (dueDate: string) => {
      if (!dueDate) return { text: "-", color: "text-muted-foreground" };
      const due = new Date(dueDate);
      const diff = Math.ceil((due.getTime() - today.getTime()) / 86400000);
      if (diff < 0) return { text: `${Math.abs(diff)}일 초과`, color: "text-destructive" };
      if (diff === 0) return { text: "오늘", color: "text-warning" };
      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-warning" };
      return { text: `${diff}일 남음`, color: "text-success" };
    },
    [today]
  );

  const getProgress = useCallback((status: string) => {
    return STATUS_PROGRESS[status] ?? 0;
  }, []);

  const handleRowClick = useCallback((id: string) => {
    setSelectedId(id);
    setDetailOpen(true);
  }, []);

  return (
    <div className="flex h-full flex-col gap-3 p-3">
      {/* 검색 필터 */}
      <div className="shrink-0">
        <DynamicSearchFilter
          tableName="dsn_design_request"
          filterId="c16-design-request"
          onFilterChange={setSearchFilters}
          externalFilterConfig={ts.filterConfig}
          dataCount={filteredRequests.length}
        />
      </div>

      {/* 현황 카드 */}
      <div className="grid grid-cols-3 gap-3 shrink-0">
        <div className="rounded-lg border bg-card px-3 py-2 text-left">
          <div className="text-[10px] text-muted-foreground">접수대기</div>
          <div className="text-xl font-bold text-info">{statusCounts.접수대기}</div>
        </div>
        <div className="rounded-lg border bg-card px-3 py-2 text-left">
          <div className="text-[10px] text-muted-foreground">설계진행</div>
          <div className="text-xl font-bold text-warning">{statusCounts.설계진행}</div>
        </div>
        <div className="rounded-lg border bg-card px-3 py-2 text-left">
          <div className="text-[10px] text-muted-foreground">출도완료</div>
          <div className="text-xl font-bold text-success">{statusCounts.출도완료}</div>
        </div>
      </div>

      {/* 액션 바 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <h2 className="text-lg font-semibold">설계의뢰 관리</h2>
          <Badge variant="secondary" className="font-mono">{filteredRequests.length}건</Badge>
        </div>
        <div className="flex items-center gap-2">
          <Button size="sm" onClick={handleOpenRegister}>
            <Plus className="w-4 h-4 mr-1.5" /> 설계의뢰 등록
          </Button>
          <div className="mx-1 h-6 w-px bg-border" />
          <Button variant="outline" size="sm" disabled={!selectedId} onClick={handleOpenEdit}>
            <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 flex flex-col overflow-hidden border rounded-lg bg-card">
        <EDataTable<DesignRequest>
          columns={ts.visibleColumns.map((col): EDataTableColumn<DesignRequest> => ({
            key: col.key,
            label: col.label,
            width: col.key === "request_no" ? "w-[100px]" : col.key === "design_type" ? "w-[70px]" : col.key === "status" ? "w-[70px]" : col.key === "priority" ? "w-[60px]" : col.key === "customer" ? "w-[90px]" : col.key === "designer" ? "w-[70px]" : col.key === "due_date" ? "w-[85px]" : col.key === "progress" ? "w-[65px]" : undefined,
            align: (col.key === "design_type" || col.key === "status" || col.key === "priority" || col.key === "progress") ? "center" : undefined,
            render: col.key === "request_no"
              ? (val: any) => <span className="text-[11px] font-semibold text-primary">{val || "-"}</span>
              : col.key === "design_type"
              ? (val: any) => val ? <Badge className={cn("text-[9px]", TYPE_STYLES[val])}>{val}</Badge> : <span>-</span>
              : col.key === "status"
              ? (val: any) => <Badge className={cn("text-[9px]", STATUS_STYLES[val])}>{val}</Badge>
              : col.key === "priority"
              ? (val: any) => <Badge className={cn("text-[9px]", PRIORITY_STYLES[val])}>{val}</Badge>
              : col.key === "progress"
              ? (_val: any, row: DesignRequest) => {
                  const progress = STATUS_PROGRESS[row.status] ?? 0;
                  return (
                    <div className="flex items-center gap-1.5">
                      <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
                        <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
                      </div>
                      <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
                    </div>
                  );
                }
              : undefined,
          }))}
          data={ts.groupData(filteredRequests)}
          loading={loading}
          emptyMessage="등록된 설계의뢰가 없어요"
          selectedId={selectedId}
          onSelect={(id) => setSelectedId(id)}
          onRowClick={(row) => handleRowClick(row.id)}
          draggableColumns={false}
        />
      </div>

      {/* 상세 정보 다이얼로그 */}
      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
          <DialogHeader>
            <DialogTitle>{selectedItem ? `설계의뢰 상세 — ${selectedItem.request_no}` : "설계의뢰 상세"}</DialogTitle>
            <DialogDescription>설계의뢰의 상세 정보를 확인해요.</DialogDescription>
          </DialogHeader>
          <div className="flex-1 overflow-y-auto">
        {selectedItem && (
          <div className="space-y-4">
            {/* 기본 정보 */}
            <div>
              <div className="mb-2 text-xs font-bold">
                <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
              </div>
              <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
                <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
                <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
                <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
                <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
                <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
                <InfoRow label="고객명" value={selectedItem.customer || "-"} />
                <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
                <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
                <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
                <InfoRow
                  label="납기"
                  value={
                    selectedItem.due_date ? (
                      <span>
                        {selectedItem.due_date}{" "}
                        <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
                          ({getDueDateInfo(selectedItem.due_date).text})
                        </span>
                      </span>
                    ) : "-"
                  }
                />
                <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
                <InfoRow
                  label="진행률"
                  value={
                    (() => {
                      const progress = getProgress(selectedItem.status);
                      return (
                        <div className="flex items-center gap-2">
                          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
                            <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
                          </div>
                          <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
                        </div>
                      );
                    })()
                  }
                />
              </div>
            </div>

            {/* 요구사양 */}
            <div>
              <div className="mb-2 text-xs font-bold">
                <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
              </div>
              <div className="rounded-lg border bg-muted/10 p-3">
                <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
                {selectedItem.drawing_no && (
                  <div className="mt-2 text-xs">
                    <span className="text-muted-foreground">참조 도면: </span>
                    <span className="text-primary">{selectedItem.drawing_no}</span>
                  </div>
                )}
                {selectedItem.content && (
                  <div className="mt-1 text-xs">
                    <span className="text-muted-foreground">비고: </span>{selectedItem.content}
                  </div>
                )}
              </div>
            </div>

            {/* 진행 이력 */}
            {selectedItem.history && selectedItem.history.length > 0 && (
              <div>
                <div className="mb-2 text-xs font-bold">
                  <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
                </div>
                <div className="space-y-0">
                  {selectedItem.history.map((h, idx) => {
                    const isLast = idx === selectedItem.history.length - 1;
                    const isDone = h.step === "출도완료" || h.step === "종료";
                    return (
                      <div key={h.id || idx} className="flex gap-3">
                        <div className="flex flex-col items-center">
                          <div
                            className={cn(
                              "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
                              isLast && !isDone
                                ? "border-primary bg-primary"
                                : isDone || !isLast
                                  ? "border-success bg-success"
                                  : "border-muted-foreground bg-muted-foreground"
                            )}
                          />
                          {!isLast && <div className="w-px flex-1 bg-border" />}
                        </div>
                        <div className="pb-3">
                          <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
                          <div className="mt-0.5 text-xs">{h.description}</div>
                          <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        )}
          </div>
          <DialogFooter>
            {selectedItem && (
              <>
                <Button variant="outline" size="sm" onClick={handleOpenEdit}>
                  <Pencil className="mr-1 h-3.5 w-3.5" />수정
                </Button>
                <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={handleDelete}>
                  <Trash2 className="mr-1 h-3.5 w-3.5" />삭제
                </Button>
              </>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 등록/수정 모달 */}
      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
          <DialogHeader>
            <DialogTitle>{isEditMode ? "설계의뢰 수정" : "설계의뢰 등록"}</DialogTitle>
            <DialogDescription>{isEditMode ? "설계의뢰 정보를 수정해요." : "새 설계의뢰를 등록해요."}</DialogDescription>
          </DialogHeader>
          <div className="flex-1 overflow-y-auto">
        <div className="flex flex-col md:flex-row gap-6 p-6">
          {/* 좌측: 기본 정보 */}
          <div className="md:w-[420px] shrink-0 space-y-4">
            <h3 className="text-sm font-semibold pb-2 border-b">의뢰 기본 정보</h3>
            <div>
              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰번호</Label>
              <Input value={form.request_no} readOnly className="h-9 bg-muted cursor-not-allowed" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰일자</Label>
                <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9" />
              </div>
              <div>
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">납기 <span className="text-destructive">*</span></Label>
                <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰 유형 <span className="text-destructive">*</span></Label>
                <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
                  <SelectContent>
                    {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">우선순위 <span className="text-destructive">*</span></Label>
                <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
                  <SelectContent>
                    {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div>
              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비/제품명 <span className="text-destructive">*</span></Label>
              <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰부서</Label>
                <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
                  <SelectContent>
                    {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰자</Label>
                <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">고객명</Label>
                <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9" />
              </div>
              <div>
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">수주번호</Label>
                <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9" />
              </div>
            </div>
            <div>
              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계담당자</Label>
              <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
                <SelectContent>
                  {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
                </SelectContent>
              </Select>
            </div>
          </div>

          {/* 우측: 상세 내용 */}
          <div className="flex min-w-0 flex-1 flex-col gap-4">
            <h3 className="text-sm font-semibold pb-2 border-b">요구사양 및 설명</h3>
            <div className="flex-1">
              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요구사양 <span className="text-destructive">*</span></Label>
              <Textarea
                value={form.spec}
                onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
                placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술해주세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
                className="min-h-[180px]"
              />
            </div>
            <div>
              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">참조 도면번호</Label>
              <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9" />
            </div>
            <div>
              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
              <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px]" rows={3} />
            </div>
            <div>
              <h3 className="text-sm font-semibold pb-2 border-b mb-2">첨부파일</h3>
              <div className="cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
                <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
                <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
              </div>
            </div>
          </div>
        </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>취소</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}
      />
    </div>
  );
}

// ========== 정보 행 서브컴포넌트 ==========
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="flex items-start gap-1">
      <span className="min-w-[80px] shrink-0 text-[11px] text-muted-foreground">{label}</span>
      <span className="text-xs font-medium">{value}</span>
    </div>
  );
}
