"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 { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from "@/components/ui/dialog";
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 {
  Search,
  Download,
  Upload,
  Settings,
  RotateCcw,
  Plus,
  Save,
  BarChart3,
  ClipboardList,
  Inbox,
  Check,
  ChevronsUpDown,
  Loader2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";

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

interface Claim {
  claimNo: string;
  claimDate: string;
  claimType: ClaimType;
  claimStatus: ClaimStatus;
  customerCode: string;
  customerName: string;
  managerName: string;
  orderNo: string;
  claimContent: string;
  processContent: string;
}

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

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

// --- Sample Data ---
const initialData: Claim[] = [
  {
    claimNo: "CLM-2025-004",
    claimDate: "2025-11-09",
    claimType: "불량",
    claimStatus: "접수",
    customerCode: "CUST-0001",
    customerName: "주식회사 코아스포트",
    managerName: "김철수",
    orderNo: "SO-2025-0102",
    claimContent: "제품 표면에 스크래치가 발견되었습니다.",
    processContent: "",
  },
  {
    claimNo: "CLM-2025-001",
    claimDate: "2025-01-05",
    claimType: "불량",
    claimStatus: "접수",
    customerCode: "CUST-0002",
    customerName: "(주)현상산업",
    managerName: "김철수",
    orderNo: "SO-2025-0102",
    claimContent: "제품 불량",
    processContent: "",
  },
  {
    claimNo: "CLM-2025-002",
    claimDate: "2025-01-04",
    claimType: "교환",
    claimStatus: "처리중",
    customerCode: "CUST-0003",
    customerName: "대한전섬",
    managerName: "이영희",
    orderNo: "SO-2025-0095",
    claimContent: "규격 불일치",
    processContent: "교환 진행 중",
  },
  {
    claimNo: "CLM-2025-003",
    claimDate: "2025-01-03",
    claimType: "반품",
    claimStatus: "완료",
    customerCode: "CUST-0004",
    customerName: "삼성전자",
    managerName: "박민수",
    orderNo: "SO-2024-1285",
    claimContent: "수량 초과 납품",
    processContent: "반품 완료",
  },
];

const getClaimTypeStyle = (type: ClaimType) => {
  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: ClaimStatus) => {
  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 [data, setData] = useState<Claim[]>(initialData);
  const [selectedClaimNo, setSelectedClaimNo] = useState<string | null>(null);

  // 검색 상태
  const [searchDateFrom, setSearchDateFrom] = useState("");
  const [searchDateTo, setSearchDateTo] = useState("");
  const [searchClaimType, setSearchClaimType] = useState<string>("all");
  const [searchStatus, setSearchStatus] = useState<string>("all");
  const [searchCustomer, setSearchCustomer] = useState("");
  const [searchClaimNo, setSearchClaimNo] = useState("");

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

  // 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);

  useEffect(() => {
    const today = new Date();
    const thirtyDaysAgo = new Date(today);
    thirtyDaysAgo.setDate(today.getDate() - 30);
    setSearchDateFrom(thirtyDaysAgo.toISOString().split("T")[0]);
    setSearchDateTo(today.toISOString().split("T")[0]);
  }, []);

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

  // 수주 목록 조회
  const fetchSalesOrders = useCallback(async () => {
    if (salesOrders.length > 0) return;
    setOrdersLoading(true);
    try {
      const res = await apiClient.post("/table-management/tables/sales_order_mng/data", {
        page: 1,
        size: 9999,
        autoFilter: true,
      });
      if (res.data?.success && res.data?.data?.rows) {
        const seen = new Set<string>();
        const list: SalesOrderOption[] = [];
        for (const row of res.data.data.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 filteredData = useMemo(() => {
    return data
      .filter((claim) => {
        if (searchDateFrom && claim.claimDate < searchDateFrom) return false;
        if (searchDateTo && claim.claimDate > searchDateTo) return false;
        if (searchClaimType !== "all" && claim.claimType !== searchClaimType)
          return false;
        if (searchStatus !== "all" && claim.claimStatus !== searchStatus)
          return false;
        if (
          searchCustomer &&
          !claim.customerName
            .toLowerCase()
            .includes(searchCustomer.toLowerCase())
        )
          return false;
        if (
          searchClaimNo &&
          !claim.claimNo.toLowerCase().includes(searchClaimNo.toLowerCase())
        )
          return false;
        return true;
      })
      .sort((a, b) => b.claimDate.localeCompare(a.claimDate));
  }, [
    data,
    searchDateFrom,
    searchDateTo,
    searchClaimType,
    searchStatus,
    searchCustomer,
    searchClaimNo,
  ]);

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

  const generateClaimNo = useCallback(() => {
    const year = new Date().getFullYear();
    const prefix = `CLM-${year}-`;
    const existingNumbers = data
      .filter((c) => c.claimNo.startsWith(prefix))
      .map((c) => parseInt(c.claimNo.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({
      claimNo: generateClaimNo(),
      claimDate: new Date().toISOString().split("T")[0],
      claimType: undefined,
      claimStatus: "접수",
      customerCode: "",
      customerName: "",
      managerName: "",
      orderNo: "",
      claimContent: "",
      processContent: "",
    });
    setIsModalOpen(true);
  };

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

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

  const handleSave = () => {
    if (!formData.claimType || !formData.customerName || !formData.claimContent) {
      alert("필수 항목을 모두 입력해주세요.");
      return;
    }

    const claimData: Claim = {
      claimNo: formData.claimNo || "",
      claimDate: formData.claimDate || new Date().toISOString().split("T")[0],
      claimType: formData.claimType as ClaimType,
      claimStatus: (formData.claimStatus as ClaimStatus) || "접수",
      customerCode: formData.customerCode || "",
      customerName: formData.customerName || "",
      managerName: formData.managerName || "",
      orderNo: formData.orderNo || "",
      claimContent: formData.claimContent || "",
      processContent: formData.processContent || "",
    };

    if (isEditMode) {
      setData((prev) =>
        prev.map((c) => (c.claimNo === claimData.claimNo ? claimData : c))
      );
    } else {
      setData((prev) => [claimData, ...prev]);
    }

    setIsModalOpen(false);
    alert("클레임이 저장되었습니다.");
  };

  const handleResetSearch = () => {
    const today = new Date();
    const thirtyDaysAgo = new Date(today);
    thirtyDaysAgo.setDate(today.getDate() - 30);
    setSearchDateFrom(thirtyDaysAgo.toISOString().split("T")[0]);
    setSearchDateTo(today.toISOString().split("T")[0]);
    setSearchClaimType("all");
    setSearchStatus("all");
    setSearchCustomer("");
    setSearchClaimNo("");
  };

  const selectedClaim = useMemo(
    () => data.find((c) => c.claimNo === 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-300 to-amber-500",
      textColor: "text-amber-900",
    },
    {
      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">
      {/* 검색 섹션 */}
      <Card className="shrink-0">
        <CardContent className="p-4 flex flex-wrap items-end gap-4">
          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">접수일자</Label>
            <div className="flex items-center gap-2">
              <Input
                type="date"
                className="w-[140px] h-9"
                value={searchDateFrom}
                onChange={(e) => setSearchDateFrom(e.target.value)}
              />
              <span className="text-muted-foreground">~</span>
              <Input
                type="date"
                className="w-[140px] h-9"
                value={searchDateTo}
                onChange={(e) => setSearchDateTo(e.target.value)}
              />
            </div>
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">클레임 유형</Label>
            <Select value={searchClaimType} onValueChange={setSearchClaimType}>
              <SelectTrigger className="w-[120px] h-9">
                <SelectValue placeholder="전체" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">전체</SelectItem>
                {CLAIM_TYPES.map((t) => (
                  <SelectItem key={t} value={t}>
                    {t}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">처리 상태</Label>
            <Select value={searchStatus} onValueChange={setSearchStatus}>
              <SelectTrigger className="w-[120px] h-9">
                <SelectValue placeholder="전체" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">전체</SelectItem>
                {CLAIM_STATUSES.map((s) => (
                  <SelectItem key={s} value={s}>
                    {s}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">거래처명</Label>
            <Input
              placeholder="거래처 검색"
              className="w-[150px] h-9"
              value={searchCustomer}
              onChange={(e) => setSearchCustomer(e.target.value)}
            />
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">클레임번호</Label>
            <Input
              placeholder="클레임번호 검색"
              className="w-[150px] h-9"
              value={searchClaimNo}
              onChange={(e) => setSearchClaimNo(e.target.value)}
            />
          </div>

          <div className="flex-1" />

          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              className="h-9"
              onClick={handleResetSearch}
            >
              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
            </Button>
            <Button variant="outline" size="sm" className="h-9">
              <Settings className="w-4 h-4 mr-2" /> 사용자옵션
            </Button>
            <Button variant="outline" size="sm" className="h-9">
              <Upload className="w-4 h-4 mr-2" /> 엑셀 업로드
            </Button>
            <Button variant="outline" size="sm" className="h-9">
              <Download className="w-4 h-4 mr-2" /> 엑셀 다운로드
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 메인 분할 레이아웃 */}
      <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">
                    {filteredData.length}건
                  </Badge>
                </div>
                <Button size="sm" onClick={openRegisterModal}>
                  <Plus className="w-4 h-4 mr-1.5" /> 클레임 등록
                </Button>
              </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>
                    {filteredData.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>등록된 클레임이 없습니다</span>
                          </div>
                        </TableCell>
                      </TableRow>
                    ) : (
                      filteredData.map((claim, idx) => (
                        <TableRow
                          key={claim.claimNo}
                          className={cn(
                            "cursor-pointer hover:bg-muted/50 transition-colors",
                            selectedClaimNo === claim.claimNo && "bg-primary/5"
                          )}
                          onClick={() => handleRowClick(claim.claimNo)}
                          onDoubleClick={() => openEditModal(claim.claimNo)}
                        >
                          <TableCell className="text-center text-muted-foreground">
                            {idx + 1}
                          </TableCell>
                          <TableCell className="font-medium">
                            {claim.claimNo}
                          </TableCell>
                          <TableCell>{claim.claimDate}</TableCell>
                          <TableCell className="text-center">
                            <span
                              className={cn(
                                "px-2 py-1 rounded-full text-[11px] font-medium border",
                                getClaimTypeStyle(claim.claimType)
                              )}
                            >
                              {claim.claimType}
                            </span>
                          </TableCell>
                          <TableCell className="text-center">
                            <span
                              className={cn(
                                "px-2 py-1 rounded-full text-[11px] font-medium border",
                                getClaimStatusStyle(claim.claimStatus)
                              )}
                            >
                              {claim.claimStatus}
                            </span>
                          </TableCell>
                          <TableCell>{claim.customerName}</TableCell>
                          <TableCell>{claim.managerName || "-"}</TableCell>
                          <TableCell className="text-muted-foreground text-xs">
                            {claim.orderNo || "-"}
                          </TableCell>
                          <TableCell className="text-xs text-muted-foreground truncate max-w-[300px]">
                            {claim.claimContent || "-"}
                          </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.claimNo}
                    </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.claimNo}
                        </span>
                      </div>
                      <div>
                        <span className="text-muted-foreground text-xs block mb-1">
                          접수일자
                        </span>
                        <span>{selectedClaim.claimDate}</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.claimType)
                          )}
                        >
                          {selectedClaim.claimType}
                        </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.claimStatus)
                          )}
                        >
                          {selectedClaim.claimStatus}
                        </span>
                      </div>
                      <div>
                        <span className="text-muted-foreground text-xs block mb-1">
                          거래처명
                        </span>
                        <span>{selectedClaim.customerName}</span>
                      </div>
                      <div>
                        <span className="text-muted-foreground text-xs block mb-1">
                          담당자
                        </span>
                        <span>{selectedClaim.managerName || "-"}</span>
                      </div>
                      <div className="col-span-2">
                        <span className="text-muted-foreground text-xs block mb-1">
                          수주번호
                        </span>
                        <span className="text-muted-foreground">
                          {selectedClaim.orderNo || "-"}
                        </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.claimContent || "-"}
                      </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.processContent || "-"}
                      </div>
                    </div>

                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full"
                      onClick={() => openEditModal(selectedClaim.claimNo)}
                    >
                      <Save className="w-4 h-4 mr-2" /> 수정
                    </Button>
                  </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>

      {/* 클레임 등록/수정 모달 */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[900px] max-h-[90vh] overflow-hidden flex flex-col">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">
              {isEditMode ? "클레임 수정" : "클레임 등록"}
            </DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              {isEditMode
                ? "클레임 정보를 수정합니다."
                : "새로운 클레임을 등록합니다."}
            </DialogDescription>
          </DialogHeader>

          <div className="flex-1 overflow-auto">
            <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="claimNo" className="text-xs sm:text-sm">
                    클레임번호
                  </Label>
                  <Input
                    id="claimNo"
                    value={formData.claimNo || ""}
                    readOnly
                    className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed"
                  />
                </div>

                <div>
                  <Label htmlFor="claimDate" className="text-xs sm:text-sm">
                    접수일자
                  </Label>
                  <Input
                    id="claimDate"
                    type="date"
                    value={formData.claimDate || ""}
                    onChange={(e) =>
                      handleFormChange("claimDate", e.target.value)
                    }
                    className="h-8 text-xs sm:h-10 sm:text-sm"
                  />
                </div>

                <div>
                  <Label htmlFor="claimType" className="text-xs sm:text-sm">
                    클레임 유형 <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={formData.claimType || ""}
                    onValueChange={(v) => handleFormChange("claimType", 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="claimStatus" className="text-xs sm:text-sm">
                    처리 상태
                  </Label>
                  <Select
                    value={formData.claimStatus || "접수"}
                    onValueChange={(v) => handleFormChange("claimStatus", 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()}
                      >
                        {formData.customerName || "거래처 선택"}
                        <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,
                                        customerCode: cust.customerCode,
                                        customerName: cust.customerName,
                                      }));
                                      setCustomerOpen(false);
                                    }}
                                    className="text-xs sm:text-sm"
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        formData.customerCode === 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="managerName" className="text-xs sm:text-sm">
                    담당자
                  </Label>
                  <Input
                    id="managerName"
                    value={formData.managerName || ""}
                    onChange={(e) =>
                      handleFormChange("managerName", 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()}
                      >
                        {formData.orderNo || "수주번호 선택"}
                        <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,
                                        orderNo: order.orderNo,
                                      }));
                                      setOrderOpen(false);
                                    }}
                                    className="text-xs sm:text-sm"
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        formData.orderNo === 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="claimContent" className="text-xs sm:text-sm">
                    클레임 내용 <span className="text-destructive">*</span>
                  </Label>
                  <Textarea
                    id="claimContent"
                    value={formData.claimContent || ""}
                    onChange={(e) =>
                      handleFormChange("claimContent", e.target.value)
                    }
                    placeholder="클레임 내용을 상세히 입력해주세요"
                    className="min-h-[200px] resize-y text-xs sm:text-sm"
                  />
                </div>

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

          <DialogFooter className="gap-2 sm:gap-0">
            <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}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              <Save className="w-4 h-4 mr-2" /> 저장
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}