"use client";

import React, { useState, useMemo, 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 { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Download,
  Plus,
  Save,
  BarChart3,
  ClipboardList,
  Inbox,
  Check,
  ChevronsUpDown,
  Loader2,
  FileSpreadsheet,
  Trash2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { useAuth } from "@/hooks/useAuth";
import { toast } from "sonner";
import { useConfirmDialog } from "@/components/common/ConfirmDialog";
import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
import { exportToExcel } from "@/lib/utils/excelExport";
import { FullscreenDialog } from "@/components/common/FullscreenDialog";
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";

// --- 상수 ---
const TABLE_NAME = "claim_mng";

type ClaimType = "불량" | "교환" | "반품" | "배송지연" | "기타";
type ClaimStatus = "접수" | "처리중" | "완료" | "취소";

interface ClaimRow {
  id: number;
  claim_no: string;
  claim_date: string;
  claim_type: string;
  claim_status: string;
  customer_code: string;
  customer_name: string;
  manager_name: string;
  order_no: string;
  claim_content: string;
  process_content: string;
  company_code?: string;
  writer?: string;
  created_date?: string;
  updated_date?: string;
  [key: string]: any;
}

interface CustomerOption {
  customerCode: string;
  customerName: string;
}

interface SalesOrderOption {
  orderNo: string;
  partnerName: string;
  status: string;
}

const getClaimTypeStyle = (type: string) => {
  switch (type) {
    case "불량":
      return "bg-rose-100 text-rose-800 border-rose-200";
    case "교환":
      return "bg-amber-100 text-amber-800 border-amber-200";
    case "반품":
      return "bg-blue-100 text-blue-800 border-blue-200";
    case "배송지연":
      return "bg-indigo-100 text-indigo-800 border-indigo-200";
    case "기타":
      return "bg-gray-100 text-gray-800 border-gray-200";
    default:
      return "bg-gray-100 text-gray-800 border-gray-200";
  }
};

const getClaimStatusStyle = (status: string) => {
  switch (status) {
    case "접수":
      return "bg-blue-100 text-blue-800 border-blue-200";
    case "처리중":
      return "bg-amber-100 text-amber-800 border-amber-200";
    case "완료":
      return "bg-emerald-100 text-emerald-800 border-emerald-200";
    case "취소":
      return "bg-rose-100 text-rose-800 border-rose-200";
    default:
      return "bg-gray-100 text-gray-800 border-gray-200";
  }
};

const CLAIM_TYPES: ClaimType[] = ["불량", "교환", "반품", "배송지연", "기타"];
const CLAIM_STATUSES: ClaimStatus[] = ["접수", "처리중", "완료", "취소"];

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

  const [data, setData] = useState<ClaimRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [totalCount, setTotalCount] = useState(0);
  const [selectedClaimNo, setSelectedClaimNo] = useState<string | null>(null);

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

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

  // 모달 상태
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const [saving, setSaving] = useState(false);
  const [formData, setFormData] = useState<Partial<ClaimRow>>({});

  // Combobox 상태
  const [customerOpen, setCustomerOpen] = useState(false);
  const [orderOpen, setOrderOpen] = useState(false);

  // DB 데이터
  const [customers, setCustomers] = useState<CustomerOption[]>([]);
  const [salesOrders, setSalesOrders] = useState<SalesOrderOption[]>([]);
  const [customersLoading, setCustomersLoading] = useState(false);
  const [ordersLoading, setOrdersLoading] = useState(false);

  // --- 데이터 조회 (table-management API + autoFilter로 멀티테넌시 자동 적용) ---
  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const filters: any[] = 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, // company_code 자동 필터링
        sort: { columnName: "claim_date", order: "desc" },
      });

      const rows: ClaimRow[] = res.data?.data?.data || res.data?.data?.rows || [];
      setData(rows);
      setTotalCount(res.data?.data?.total || rows.length);
    } catch (err) {
      console.error("클레임 조회 실패:", err);
      toast.error("클레임 목록을 불러오는데 실패했습니다.");
    } finally {
      setLoading(false);
    }
  }, [searchFilters]);

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

  // 거래처 목록 조회 (autoFilter로 멀티테넌시 적용)
  const fetchCustomers = useCallback(async (force = false) => {
    if (!force && customers.length > 0) return;
    setCustomersLoading(true);
    try {
      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
        page: 1,
        size: 9999,
        autoFilter: { enabled: true },
      });
      const rows = res.data?.data?.data || res.data?.data?.rows;
      if (res.data?.success && Array.isArray(rows)) {
        const list: CustomerOption[] = rows.map((row: any) => ({
          customerCode: row.customer_code || row.id || "",
          customerName: row.customer_name || "",
        }));
        setCustomers(list);
      }
    } catch (e) {
      console.error("거래처 목록 조회 실패:", e);
    } finally {
      setCustomersLoading(false);
    }
  }, [customers.length]);

  // 수주 목록 조회 (autoFilter로 멀티테넌시 적용)
  const fetchSalesOrders = useCallback(async (force = false) => {
    if (!force && salesOrders.length > 0) return;
    setOrdersLoading(true);
    try {
      const res = await apiClient.post("/table-management/tables/sales_order_mng/data", {
        page: 1,
        size: 9999,
        autoFilter: { enabled: true },
      });
      const rows = res.data?.data?.data || res.data?.data?.rows;
      if (res.data?.success && Array.isArray(rows)) {
        const seen = new Set<string>();
        const list: SalesOrderOption[] = [];
        for (const row of rows) {
          const orderNo = row.order_no || "";
          if (!orderNo || seen.has(orderNo)) continue;
          seen.add(orderNo);
          list.push({
            orderNo,
            partnerName: row.partner_id || "",
            status: row.status || "",
          });
        }
        setSalesOrders(list);
      }
    } catch (e) {
      console.error("수주 목록 조회 실패:", e);
    } finally {
      setOrdersLoading(false);
    }
  }, [salesOrders.length]);

  // 상태별 카운트
  const statusCounts = useMemo(() => {
    const counts = { 접수: 0, 처리중: 0, 완료: 0, 취소: 0 };
    data.forEach((claim) => {
      if (counts[claim.claim_status as keyof typeof counts] !== undefined) {
        counts[claim.claim_status as keyof typeof counts]++;
      }
    });
    return counts;
  }, [data]);

  // 클레임번호 자동 생성
  const generateClaimNo = useCallback(() => {
    const year = new Date().getFullYear();
    const prefix = `CLM-${year}-`;
    const existingNumbers = data
      .filter((c) => c.claim_no?.startsWith(prefix))
      .map((c) => parseInt(c.claim_no.replace(prefix, ""), 10))
      .filter((n) => !isNaN(n));
    const maxNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) : 0;
    return `${prefix}${String(maxNumber + 1).padStart(3, "0")}`;
  }, [data]);

  const handleRowClick = (claimNo: string) => {
    setSelectedClaimNo(claimNo);
  };

  const openRegisterModal = () => {
    setIsEditMode(false);
    setFormData({
      claim_no: generateClaimNo(),
      claim_date: new Date().toISOString().split("T")[0],
      claim_type: undefined,
      claim_status: "접수",
      customer_code: "",
      customer_name: "",
      manager_name: "",
      order_no: "",
      claim_content: "",
      process_content: "",
    });
    setIsModalOpen(true);
    fetchCustomers(true);
    fetchSalesOrders(true);
  };

  const openEditModal = (claimNo: string) => {
    const claim = data.find((c) => c.claim_no === claimNo);
    if (!claim) return;
    setIsEditMode(true);
    setFormData({ ...claim });
    setIsModalOpen(true);
    fetchCustomers(true);
    fetchSalesOrders(true);
  };

  const handleFormChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  // --- 저장 (table-management API, company_code 자동 주입) ---
  const handleSave = async () => {
    if (!formData.claim_type || !formData.customer_name || !formData.claim_content) {
      toast.error("필수 항목을 모두 입력해주세요. (클레임유형, 거래처명, 클레임내용)");
      return;
    }

    setSaving(true);
    try {
      // company_code, writer, created_date 등 시스템 필드는 제외 (백엔드가 자동 주입)
      const { id, company_code, writer, created_date, updated_date, created_by, updated_by, ...saveFields } = formData as any;

      if (isEditMode && id) {
        // 수정
        await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
          originalData: { id },
          updatedData: saveFields,
        });
        toast.success("클레임이 수정되었습니다.");
      } else {
        // 등록
        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, saveFields);
        toast.success("클레임이 등록되었습니다.");
      }

      setIsModalOpen(false);
      fetchData(); // 목록 새로고침
    } catch (err: any) {
      console.error("클레임 저장 실패:", err);
      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
    } finally {
      setSaving(false);
    }
  };

  // --- 삭제 ---
  const handleDelete = async (claimNo: string) => {
    const claim = data.find((c) => c.claim_no === claimNo);
    if (!claim) return;

    const ok = await confirm(`클레임 ${claimNo}을(를) 삭제하시겠습니까?`, {
      variant: "destructive",
      confirmText: "삭제",
    });
    if (!ok) return;

    try {
      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
        data: [{ id: claim.id }],
      });
      toast.success("클레임이 삭제되었습니다.");
      if (selectedClaimNo === claimNo) setSelectedClaimNo(null);
      fetchData();
    } catch (err: any) {
      console.error("클레임 삭제 실패:", err);
      toast.error(err.response?.data?.message || "삭제에 실패했습니다.");
    }
  };

  // 엑셀 다운로드
  const handleExcelDownload = async () => {
    if (data.length === 0) {
      toast.error("다운로드할 데이터가 없습니다.");
      return;
    }
    try {
      const exportData = data.map((row) => ({
        클레임번호: row.claim_no,
        접수일자: row.claim_date,
        클레임유형: row.claim_type,
        처리상태: row.claim_status,
        거래처코드: row.customer_code,
        거래처명: row.customer_name,
        담당자: row.manager_name,
        수주번호: row.order_no,
        클레임내용: row.claim_content,
        처리내용: row.process_content,
      }));
      await exportToExcel(exportData, "클레임관리.xlsx", "클레임");
      toast.success("엑셀 다운로드 완료");
    } catch (err) {
      console.error("엑셀 다운로드 실패:", err);
      toast.error("엑셀 다운로드에 실패했습니다.");
    }
  };

  const selectedClaim = useMemo(
    () => data.find((c) => c.claim_no === selectedClaimNo),
    [data, selectedClaimNo]
  );

  const statCards: {
    label: string;
    value: number;
    gradient: string;
    textColor: string;
  }[] = [
    {
      label: "접수",
      value: statusCounts["접수"],
      gradient: "from-indigo-500 to-purple-600",
      textColor: "text-white",
    },
    {
      label: "처리중",
      value: statusCounts["처리중"],
      gradient: "from-amber-400 to-orange-500",
      textColor: "text-white",
    },
    {
      label: "완료",
      value: statusCounts["완료"],
      gradient: "from-cyan-400 to-blue-500",
      textColor: "text-white",
    },
    {
      label: "취소",
      value: statusCounts["취소"],
      gradient: "from-slate-300 to-slate-400",
      textColor: "text-slate-800",
    },
  ];

  return (
    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
      {/* 검색 섹션 — DynamicSearchFilter 사용 */}
      <DynamicSearchFilter
        tableName={TABLE_NAME}
        filterId="sales-claim"
        onFilterChange={setSearchFilters}
        dataCount={totalCount}
      />

      {/* 메인 분할 레이아웃 */}
      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
        <ResizablePanelGroup direction="horizontal">
          {/* 왼쪽: 클레임 목록 */}
          <ResizablePanel defaultSize={65} minSize={35}>
            <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">
                  <ClipboardList className="w-4 h-4" />
                  클레임 목록
                  <Badge variant="secondary" className="font-normal">
                    {totalCount}건
                  </Badge>
                  {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
                </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>
                  <Button size="sm" onClick={openRegisterModal}>
                    <Plus className="w-4 h-4 mr-1.5" /> 클레임 등록
                  </Button>
                </div>
              </div>

              <div className="flex-1 overflow-auto">
                <Table>
                  <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
                    <TableRow>
                      <TableHead className="w-[50px] text-center">No</TableHead>
                      <TableHead className="w-[130px]">클레임번호</TableHead>
                      <TableHead className="w-[110px]">접수일자</TableHead>
                      <TableHead className="w-[90px] text-center">유형</TableHead>
                      <TableHead className="w-[90px] text-center">상태</TableHead>
                      <TableHead className="w-[150px]">거래처명</TableHead>
                      <TableHead className="w-[100px]">담당자</TableHead>
                      <TableHead className="w-[120px]">수주번호</TableHead>
                      <TableHead>클레임 내용</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {data.length === 0 ? (
                      <TableRow>
                        <TableCell
                          colSpan={9}
                          className="h-32 text-center text-muted-foreground"
                        >
                          <div className="flex flex-col items-center gap-2">
                            <Inbox className="w-8 h-8 text-muted-foreground/50" />
                            <span>{loading ? "데이터를 불러오는 중..." : "등록된 클레임이 없습니다"}</span>
                          </div>
                        </TableCell>
                      </TableRow>
                    ) : (
                      data.map((claim, idx) => (
                        <TableRow
                          key={claim.id}
                          className={cn(
                            "cursor-pointer hover:bg-muted/50 transition-colors",
                            selectedClaimNo === claim.claim_no && "bg-primary/5"
                          )}
                          onClick={() => handleRowClick(claim.claim_no)}
                          onDoubleClick={() => openEditModal(claim.claim_no)}
                        >
                          <TableCell className="text-center text-muted-foreground">
                            {idx + 1}
                          </TableCell>
                          <TableCell className="font-medium">
                            {claim.claim_no}
                          </TableCell>
                          <TableCell>{claim.claim_date}</TableCell>
                          <TableCell className="text-center">
                            <span
                              className={cn(
                                "px-2 py-1 rounded-full text-[11px] font-medium border",
                                getClaimTypeStyle(claim.claim_type)
                              )}
                            >
                              {claim.claim_type}
                            </span>
                          </TableCell>
                          <TableCell className="text-center">
                            <span
                              className={cn(
                                "px-2 py-1 rounded-full text-[11px] font-medium border",
                                getClaimStatusStyle(claim.claim_status)
                              )}
                            >
                              {claim.claim_status}
                            </span>
                          </TableCell>
                          <TableCell>{claim.customer_name}</TableCell>
                          <TableCell>{claim.manager_name || "-"}</TableCell>
                          <TableCell className="text-muted-foreground text-xs">
                            {claim.order_no || "-"}
                          </TableCell>
                          <TableCell className="text-xs text-muted-foreground truncate max-w-[300px]">
                            {claim.claim_content || "-"}
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          </ResizablePanel>

          <ResizableHandle withHandle />

          {/* 오른쪽: 처리 현황 */}
          <ResizablePanel defaultSize={35} minSize={20}>
            <div className="flex flex-col h-full bg-card">
              <div className="flex items-center justify-between p-3 border-b shrink-0">
                <span className="font-semibold flex items-center gap-2">
                  <BarChart3 className="w-4 h-4" />
                  처리 현황
                </span>
              </div>

              <div className="flex-1 overflow-auto p-4 space-y-5">
                {/* 상태별 카드 */}
                <div className="grid grid-cols-2 gap-3">
                  {statCards.map((card) => (
                    <div
                      key={card.label}
                      className={cn(
                        "rounded-xl p-5 text-center bg-linear-to-br transition-all hover:-translate-y-0.5 hover:shadow-md",
                        card.gradient,
                        card.textColor
                      )}
                    >
                      <div className="text-sm font-medium opacity-90 mb-2">
                        {card.label}
                      </div>
                      <div className="text-4xl font-bold">{card.value}</div>
                    </div>
                  ))}
                </div>

                {/* 선택된 클레임 상세 */}
                {selectedClaim ? (
                  <div className="space-y-4">
                    <h3 className="text-sm font-semibold flex items-center gap-2 pt-2 border-t">
                      <ClipboardList className="w-4 h-4" />
                      클레임 상세 - {selectedClaim.claim_no}
                    </h3>

                    <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
                      <div>
                        <span className="text-muted-foreground text-xs block mb-1">
                          클레임번호
                        </span>
                        <span className="font-medium">
                          {selectedClaim.claim_no}
                        </span>
                      </div>
                      <div>
                        <span className="text-muted-foreground text-xs block mb-1">
                          접수일자
                        </span>
                        <span>{selectedClaim.claim_date}</span>
                      </div>
                      <div>
                        <span className="text-muted-foreground text-xs block mb-1">
                          유형
                        </span>
                        <span
                          className={cn(
                            "px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block",
                            getClaimTypeStyle(selectedClaim.claim_type)
                          )}
                        >
                          {selectedClaim.claim_type}
                        </span>
                      </div>
                      <div>
                        <span className="text-muted-foreground text-xs block mb-1">
                          상태
                        </span>
                        <span
                          className={cn(
                            "px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block",
                            getClaimStatusStyle(selectedClaim.claim_status)
                          )}
                        >
                          {selectedClaim.claim_status}
                        </span>
                      </div>
                      <div>
                        <span className="text-muted-foreground text-xs block mb-1">
                          거래처명
                        </span>
                        <span>{selectedClaim.customer_name}</span>
                      </div>
                      <div>
                        <span className="text-muted-foreground text-xs block mb-1">
                          담당자
                        </span>
                        <span>{selectedClaim.manager_name || "-"}</span>
                      </div>
                      <div className="col-span-2">
                        <span className="text-muted-foreground text-xs block mb-1">
                          수주번호
                        </span>
                        <span className="text-muted-foreground">
                          {selectedClaim.order_no || "-"}
                        </span>
                      </div>
                    </div>

                    <div>
                      <span className="text-muted-foreground text-xs block mb-1">
                        클레임 내용
                      </span>
                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[60px]">
                        {selectedClaim.claim_content || "-"}
                      </div>
                    </div>

                    <div>
                      <span className="text-muted-foreground text-xs block mb-1">
                        처리 내용
                      </span>
                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[60px]">
                        {selectedClaim.process_content || "-"}
                      </div>
                    </div>

                    <div className="flex gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        className="flex-1"
                        onClick={() => openEditModal(selectedClaim.claim_no)}
                      >
                        <Save className="w-4 h-4 mr-2" /> 수정
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        className="text-destructive hover:text-destructive"
                        onClick={() => handleDelete(selectedClaim.claim_no)}
                      >
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                ) : (
                  <div className="flex flex-col items-center justify-center py-10 text-center">
                    <div className="w-14 h-14 rounded-full bg-muted flex items-center justify-center mb-3">
                      <BarChart3 className="w-7 h-7 text-muted-foreground" />
                    </div>
                    <p className="text-sm text-muted-foreground">
                      클레임을 선택하면 상세 정보가 표시됩니다
                    </p>
                  </div>
                )}
              </div>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>

      {/* 클레임 등록/수정 모달 — FullscreenDialog 사용 */}
      <FullscreenDialog
        open={isModalOpen}
        onOpenChange={setIsModalOpen}
        title={isEditMode ? "클레임 수정" : "클레임 등록"}
        description={isEditMode ? "클레임 정보를 수정합니다." : "새로운 클레임을 등록합니다."}
        defaultMaxWidth="max-w-[900px]"
        footer={
          <div className="flex gap-2 w-full sm:w-auto">
            <Button
              variant="outline"
              onClick={() => setIsModalOpen(false)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              onClick={handleSave}
              disabled={saving}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {saving ? (
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
              ) : (
                <Save className="w-4 h-4 mr-2" />
              )}
              저장
            </Button>
          </div>
        }
      >
        <div className="flex flex-col md:flex-row gap-5">
          {/* 왼쪽: 기본 정보 */}
          <div className="md:w-[340px] shrink-0 space-y-4 bg-muted/30 p-4 rounded-lg border border-border/50">
            <h3 className="text-sm font-semibold pb-2 border-b">
              클레임 기본 정보
            </h3>

            <div>
              <Label htmlFor="claim_no" className="text-xs sm:text-sm">
                클레임번호
              </Label>
              <Input
                id="claim_no"
                value={formData.claim_no || ""}
                readOnly
                className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed"
              />
            </div>

            <div>
              <Label htmlFor="claim_date" className="text-xs sm:text-sm">
                접수일자
              </Label>
              <FormDatePicker
                value={formData.claim_date || ""}
                onChange={(v) => handleFormChange("claim_date", v)}
                placeholder="접수일자"
              />
            </div>

            <div>
              <Label htmlFor="claim_type" className="text-xs sm:text-sm">
                클레임 유형 <span className="text-destructive">*</span>
              </Label>
              <Select
                value={formData.claim_type || ""}
                onValueChange={(v) => handleFormChange("claim_type", v)}
              >
                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                  <SelectValue placeholder="선택" />
                </SelectTrigger>
                <SelectContent>
                  {CLAIM_TYPES.map((t) => (
                    <SelectItem key={t} value={t}>
                      {t}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label htmlFor="claim_status" className="text-xs sm:text-sm">
                처리 상태
              </Label>
              <Select
                value={formData.claim_status || "접수"}
                onValueChange={(v) => handleFormChange("claim_status", v)}
              >
                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {CLAIM_STATUSES.map((s) => (
                    <SelectItem key={s} value={s}>
                      {s}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label className="text-xs sm:text-sm">
                거래처명 <span className="text-destructive">*</span>
              </Label>
              <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={customerOpen}
                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm font-normal"
                    onClick={() => fetchCustomers(false)}
                  >
                    {formData.customer_name || "거래처 선택"}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent
                  className="p-0"
                  style={{ width: "var(--radix-popover-trigger-width)" }}
                  align="start"
                >
                  <Command>
                    <CommandInput
                      placeholder="거래처 검색..."
                      className="text-xs sm:text-sm"
                    />
                    <CommandList>
                      {customersLoading ? (
                        <div className="flex items-center justify-center py-6">
                          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                          <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
                        </div>
                      ) : (
                        <>
                          <CommandEmpty className="text-xs sm:text-sm py-4 text-center">
                            거래처를 찾을 수 없습니다.
                          </CommandEmpty>
                          <CommandGroup>
                            {customers.map((cust) => (
                              <CommandItem
                                key={cust.customerCode}
                                value={`${cust.customerCode} ${cust.customerName}`}
                                onSelect={() => {
                                  setFormData((prev) => ({
                                    ...prev,
                                    customer_code: cust.customerCode,
                                    customer_name: cust.customerName,
                                  }));
                                  setCustomerOpen(false);
                                }}
                                className="text-xs sm:text-sm"
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    formData.customer_code === cust.customerCode
                                      ? "opacity-100"
                                      : "opacity-0"
                                  )}
                                />
                                <div className="flex flex-col">
                                  <span className="font-medium">{cust.customerName}</span>
                                  <span className="text-[10px] text-muted-foreground">
                                    {cust.customerCode}
                                  </span>
                                </div>
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </>
                      )}
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>

            <div>
              <Label htmlFor="manager_name" className="text-xs sm:text-sm">
                담당자
              </Label>
              <Input
                id="manager_name"
                value={formData.manager_name || ""}
                onChange={(e) => handleFormChange("manager_name", e.target.value)}
                className="h-8 text-xs sm:h-10 sm:text-sm"
              />
            </div>

            <div>
              <Label className="text-xs sm:text-sm">수주번호</Label>
              <Popover open={orderOpen} onOpenChange={setOrderOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={orderOpen}
                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm font-normal"
                    onClick={() => fetchSalesOrders(false)}
                  >
                    {formData.order_no || "수주번호 선택"}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent
                  className="p-0"
                  style={{ width: "var(--radix-popover-trigger-width)" }}
                  align="start"
                >
                  <Command>
                    <CommandInput
                      placeholder="수주번호 검색..."
                      className="text-xs sm:text-sm"
                    />
                    <CommandList>
                      {ordersLoading ? (
                        <div className="flex items-center justify-center py-6">
                          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                          <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
                        </div>
                      ) : (
                        <>
                          <CommandEmpty className="text-xs sm:text-sm py-4 text-center">
                            수주번호를 찾을 수 없습니다.
                          </CommandEmpty>
                          <CommandGroup>
                            {salesOrders.map((order) => (
                              <CommandItem
                                key={order.orderNo}
                                value={`${order.orderNo} ${order.partnerName}`}
                                onSelect={() => {
                                  setFormData((prev) => ({
                                    ...prev,
                                    order_no: order.orderNo,
                                  }));
                                  setOrderOpen(false);
                                }}
                                className="text-xs sm:text-sm"
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    formData.order_no === order.orderNo
                                      ? "opacity-100"
                                      : "opacity-0"
                                  )}
                                />
                                <div className="flex flex-col">
                                  <span className="font-medium">{order.orderNo}</span>
                                  <span className="text-[10px] text-muted-foreground">
                                    {order.status}
                                    {order.partnerName ? ` | ${order.partnerName}` : ""}
                                  </span>
                                </div>
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </>
                      )}
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>
          </div>

          {/* 오른쪽: 상세 내용 */}
          <div className="flex-1 space-y-4 bg-muted/30 p-4 rounded-lg border border-border/50 min-w-0">
            <h3 className="text-sm font-semibold pb-2 border-b">
              클레임 상세 내용
            </h3>

            <div className="flex flex-col flex-1">
              <Label htmlFor="claim_content" className="text-xs sm:text-sm">
                클레임 내용 <span className="text-destructive">*</span>
              </Label>
              <Textarea
                id="claim_content"
                value={formData.claim_content || ""}
                onChange={(e) => handleFormChange("claim_content", e.target.value)}
                placeholder="클레임 내용을 상세히 입력해주세요"
                className="min-h-[200px] resize-y text-xs sm:text-sm"
              />
            </div>

            <div>
              <Label htmlFor="process_content" className="text-xs sm:text-sm">
                처리 내용
              </Label>
              <Textarea
                id="process_content"
                value={formData.process_content || ""}
                onChange={(e) => handleFormChange("process_content", e.target.value)}
                placeholder="처리 내용을 입력해주세요"
                className="min-h-[150px] resize-y text-xs sm:text-sm"
              />
            </div>
          </div>
        </div>
      </FullscreenDialog>

      {/* 엑셀 업로드 모달 */}
      <ExcelUploadModal
        open={excelUploadOpen}
        onOpenChange={setExcelUploadOpen}
        tableName={TABLE_NAME}
        onSuccess={() => {
          fetchData();
          toast.success("엑셀 업로드가 완료되었습니다.");
        }}
      />

      {/* 확인 다이얼로그 */}
      {ConfirmDialogComponent}
    </div>
  );
}
