"use client";

import React, { useState, useMemo, useEffect, useCallback, useRef } 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 { Checkbox } from "@/components/ui/checkbox";
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 { Plus, Trash2, RotateCcw, Save, X, ChevronDown, ChevronRight, ChevronLeft, Truck, Search, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
import {
  getShippingOrderList,
  saveShippingOrder,
  deleteShippingOrders,
  previewShippingOrderNo,
  getShipmentPlanSource,
  getSalesOrderSource,
  getItemSource,
} from "@/lib/api/shipping";

type DataSourceType = "shipmentPlan" | "salesOrder" | "itemInfo";

const STATUS_OPTIONS = [
  { value: "all", label: "전체" },
  { value: "READY", label: "준비중" },
  { value: "IN_PROGRESS", label: "진행중" },
  { value: "COMPLETED", label: "완료" },
];

const getStatusLabel = (s: string) => STATUS_OPTIONS.find(o => o.value === s)?.label || s;

const getStatusColor = (s: string) => {
  switch (s) {
    case "READY": return "bg-amber-100 text-amber-800 border-amber-200";
    case "IN_PROGRESS": return "bg-blue-100 text-blue-800 border-blue-200";
    case "COMPLETED": return "bg-emerald-100 text-emerald-800 border-emerald-200";
    default: return "bg-gray-100 text-gray-800 border-gray-200";
  }
};

const getSourceBadge = (s: string) => {
  switch (s) {
    case "shipmentPlan": return { label: "출하계획", cls: "bg-blue-100 text-blue-700" };
    case "salesOrder": return { label: "수주", cls: "bg-emerald-100 text-emerald-700" };
    case "itemInfo": return { label: "품목", cls: "bg-purple-100 text-purple-700" };
    default: return { label: s, cls: "bg-gray-100 text-gray-700" };
  }
};

interface SelectedItem {
  id: string | number;
  itemCode: string;
  itemName: string;
  spec: string;
  material: string;
  customer: string;
  planQty: number;
  orderQty: number;
  sourceType: DataSourceType;
  shipmentPlanId?: number;
  salesOrderId?: number;
  detailId?: string;
  partnerCode?: string;
}

export default function ShippingOrderPage() {
  const [orders, setOrders] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [checkedIds, setCheckedIds] = useState<number[]>([]);

  // 검색
  const [searchKeyword, setSearchKeyword] = useState("");
  const [searchCustomer, setSearchCustomer] = useState("");
  const [debouncedKeyword, setDebouncedKeyword] = useState("");
  const [debouncedCustomer, setDebouncedCustomer] = useState("");
  const [searchStatus, setSearchStatus] = useState("all");
  const [searchDateFrom, setSearchDateFrom] = useState("");
  const [searchDateTo, setSearchDateTo] = useState("");

  // 모달
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [saving, setSaving] = useState(false);

  // 모달 폼
  const [formOrderNumber, setFormOrderNumber] = useState("");
  const [formOrderDate, setFormOrderDate] = useState("");
  const [formCustomer, setFormCustomer] = useState("");
  const [formPartnerId, setFormPartnerId] = useState("");
  const [formStatus, setFormStatus] = useState("READY");
  const [formCarrier, setFormCarrier] = useState("");
  const [formVehicle, setFormVehicle] = useState("");
  const [formDriver, setFormDriver] = useState("");
  const [formDriverPhone, setFormDriverPhone] = useState("");
  const [formArrival, setFormArrival] = useState("");
  const [formAddress, setFormAddress] = useState("");
  const [formMemo, setFormMemo] = useState("");
  const [isTransportCollapsed, setIsTransportCollapsed] = useState(false);

  // 모달 왼쪽 패널
  const [dataSource, setDataSource] = useState<DataSourceType>("shipmentPlan");
  const [sourceKeyword, setSourceKeyword] = useState("");
  const [sourceData, setSourceData] = useState<any[]>([]);
  const [sourceLoading, setSourceLoading] = useState(false);
  const [selectedItems, setSelectedItems] = useState<SelectedItem[]>([]);
  const [sourcePage, setSourcePage] = useState(1);
  const [sourcePageSize] = useState(20);
  const [sourceTotalCount, setSourceTotalCount] = useState(0);

  // 텍스트 입력 debounce (500ms)
  useEffect(() => {
    const t = setTimeout(() => setDebouncedKeyword(searchKeyword), 500);
    return () => clearTimeout(t);
  }, [searchKeyword]);

  useEffect(() => {
    const t = setTimeout(() => setDebouncedCustomer(searchCustomer), 500);
    return () => clearTimeout(t);
  }, [searchCustomer]);

  // 초기 날짜
  useEffect(() => {
    const today = new Date();
    const from = new Date(today);
    from.setMonth(from.getMonth() - 1);
    setSearchDateFrom(from.toISOString().split("T")[0]);
    setSearchDateTo(today.toISOString().split("T")[0]);
  }, []);

  // 데이터 조회
  const fetchOrders = useCallback(async () => {
    setLoading(true);
    try {
      const params: any = {};
      if (searchDateFrom) params.dateFrom = searchDateFrom;
      if (searchDateTo) params.dateTo = searchDateTo;
      if (searchStatus !== "all") params.status = searchStatus;
      if (debouncedCustomer.trim()) params.customer = debouncedCustomer.trim();
      if (debouncedKeyword.trim()) params.keyword = debouncedKeyword.trim();

      const result = await getShippingOrderList(params);
      if (result.success) setOrders(result.data || []);
    } catch (err) {
      console.error("출하지시 조회 실패:", err);
    } finally {
      setLoading(false);
    }
  }, [searchDateFrom, searchDateTo, searchStatus, debouncedCustomer, debouncedKeyword]);

  useEffect(() => {
    if (searchDateFrom && searchDateTo) fetchOrders();
  }, [fetchOrders]);

  // 소스 데이터 조회
  const fetchSourceData = useCallback(async (pageOverride?: number) => {
    setSourceLoading(true);
    try {
      const currentPage = pageOverride ?? sourcePage;
      const params: any = { page: currentPage, pageSize: sourcePageSize };
      if (sourceKeyword.trim()) params.keyword = sourceKeyword.trim();

      let result;
      switch (dataSource) {
        case "shipmentPlan":
          result = await getShipmentPlanSource(params);
          break;
        case "salesOrder":
          result = await getSalesOrderSource(params);
          break;
        case "itemInfo":
          result = await getItemSource(params);
          break;
      }
      if (result?.success) {
        setSourceData(result.data || []);
        setSourceTotalCount(result.totalCount || 0);
      }
    } catch (err) {
      console.error("소스 데이터 조회 실패:", err);
    } finally {
      setSourceLoading(false);
    }
  }, [dataSource, sourceKeyword, sourcePage, sourcePageSize]);

  useEffect(() => {
    if (isModalOpen) {
      setSourcePage(1);
      fetchSourceData(1);
    }
  }, [isModalOpen, dataSource]);

  // 핸들러
  const handleResetSearch = () => {
    setSearchKeyword("");
    setSearchCustomer("");
    setDebouncedKeyword("");
    setDebouncedCustomer("");
    setSearchStatus("all");
    const today = new Date();
    const from = new Date(today);
    from.setMonth(from.getMonth() - 1);
    setSearchDateFrom(from.toISOString().split("T")[0]);
    setSearchDateTo(today.toISOString().split("T")[0]);
  };

  const handleCheckAll = (checked: boolean) => {
    setCheckedIds(checked ? orders.map((o: any) => o.id) : []);
  };

  const handleDeleteSelected = async () => {
    if (checkedIds.length === 0) return;
    if (!confirm(`선택한 ${checkedIds.length}개의 출하지시를 삭제하시겠습니까?`)) return;
    try {
      const result = await deleteShippingOrders(checkedIds);
      if (result.success) {
        setCheckedIds([]);
        fetchOrders();
        alert("삭제되었습니다.");
      }
    } catch (err: any) {
      alert(err.message || "삭제 실패");
    }
  };

  // 모달 열기
  const openModal = (order?: any) => {
    if (order) {
      setIsEditMode(true);
      setEditId(order.id);
      setFormOrderNumber(order.instruction_no || "");
      setFormOrderDate(order.instruction_date ? order.instruction_date.split("T")[0] : "");
      setFormCustomer(order.customer_name || "");
      setFormPartnerId(order.partner_id || "");
      setFormStatus(order.status || "READY");
      setFormCarrier(order.carrier_name || "");
      setFormVehicle(order.vehicle_no || "");
      setFormDriver(order.driver_name || "");
      setFormDriverPhone(order.driver_contact || "");
      setFormArrival(order.arrival_time ? order.arrival_time.slice(0, 16) : "");
      setFormAddress(order.delivery_address || "");
      setFormMemo(order.memo || "");

      const items = order.items || [];
      setSelectedItems(items.filter((it: any) => it.id).map((it: any) => {
        const srcType = it.source_type || "shipmentPlan";
        // 소스 데이터와 매칭할 수 있도록 원래 소스 id를 사용
        let sourceId: string | number = it.id;
        if (srcType === "shipmentPlan" && it.shipment_plan_id) sourceId = it.shipment_plan_id;
        else if (srcType === "salesOrder" && it.detail_id) sourceId = it.detail_id;
        else if (srcType === "itemInfo") sourceId = it.item_code || "";

        return {
          id: sourceId,
          itemCode: it.item_code || "",
          itemName: it.item_name || "",
          spec: it.spec || "",
          material: it.material || "",
          customer: order.customer_name || "",
          planQty: Number(it.plan_qty || 0),
          orderQty: Number(it.order_qty || 0),
          sourceType: srcType,
          shipmentPlanId: it.shipment_plan_id,
          salesOrderId: it.sales_order_id,
          detailId: it.detail_id,
          partnerCode: order.partner_id,
        };
      }));
    } else {
      setIsEditMode(false);
      setEditId(null);
      setFormOrderNumber("불러오는 중...");
      setFormOrderDate(new Date().toISOString().split("T")[0]);
      previewShippingOrderNo().then(r => {
        if (r.success) setFormOrderNumber(r.instructionNo);
        else setFormOrderNumber("(자동생성)");
      }).catch(() => setFormOrderNumber("(자동생성)"));
      setFormCustomer("");
      setFormPartnerId("");
      setFormStatus("READY");
      setFormCarrier("");
      setFormVehicle("");
      setFormDriver("");
      setFormDriverPhone("");
      setFormArrival("");
      setFormAddress("");
      setFormMemo("");
      setSelectedItems([]);
    }
    setDataSource("shipmentPlan");
    setSourceKeyword("");
    setSourceData([]);
    setIsTransportCollapsed(false);
    setIsModalOpen(true);
  };

  // 소스 아이템 선택 토글
  const toggleSourceItem = (item: any) => {
    const key = dataSource === "shipmentPlan" ? item.id
      : dataSource === "salesOrder" ? item.id
      : item.item_code;

    const exists = selectedItems.findIndex(s => {
      // 같은 소스 타입에서 id 매칭
      if (s.sourceType === dataSource) {
        if (dataSource === "itemInfo") return s.itemCode === key;
        return String(s.id) === String(key);
      }
      // 다른 소스 타입이라도 원래 소스 id로 매칭
      if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
      if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
      return false;
    });

    if (exists > -1) {
      setSelectedItems(prev => prev.filter((_, i) => i !== exists));
    } else {
      const newItem: SelectedItem = {
        id: key,
        itemCode: item.item_code || "",
        itemName: item.item_name || "",
        spec: item.spec || "",
        material: item.material || "",
        customer: item.customer_name || "",
        planQty: Number(item.plan_qty || item.qty || item.balance_qty || 0),
        orderQty: Number(item.plan_qty || item.balance_qty || item.qty || 1),
        sourceType: dataSource,
        shipmentPlanId: dataSource === "shipmentPlan" ? item.id : undefined,
        salesOrderId: dataSource === "salesOrder" ? (item.master_id || undefined) : undefined,
        detailId: dataSource === "salesOrder" ? item.id : (dataSource === "shipmentPlan" ? item.detail_id : undefined),
        partnerCode: item.partner_code || "",
      };
      setSelectedItems(prev => [...prev, newItem]);

      if (!formCustomer && item.customer_name) {
        setFormCustomer(item.customer_name);
        setFormPartnerId(item.partner_code || "");
      }
    }
  };

  const removeSelectedItem = (idx: number) => {
    setSelectedItems(prev => prev.filter((_, i) => i !== idx));
  };

  const updateOrderQty = (idx: number, val: number) => {
    setSelectedItems(prev => prev.map((item, i) => i === idx ? { ...item, orderQty: val } : item));
  };

  // 저장
  const handleSave = async () => {
    if (!formOrderDate) { alert("출하지시일을 입력해주세요."); return; }
    if (selectedItems.length === 0) { alert("품목을 선택해주세요."); return; }

    setSaving(true);
    try {
      const payload = {
        id: isEditMode ? editId : undefined,
        instructionDate: formOrderDate,
        partnerId: formPartnerId || formCustomer,
        status: formStatus,
        memo: formMemo,
        carrierName: formCarrier,
        vehicleNo: formVehicle,
        driverName: formDriver,
        driverContact: formDriverPhone,
        arrivalTime: formArrival || null,
        deliveryAddress: formAddress,
        items: selectedItems.map(item => ({
          itemCode: item.itemCode,
          itemName: item.itemName,
          spec: item.spec,
          material: item.material,
          orderQty: item.orderQty,
          planQty: item.planQty,
          shipQty: 0,
          sourceType: item.sourceType,
          shipmentPlanId: item.shipmentPlanId,
          salesOrderId: item.salesOrderId,
          detailId: item.detailId,
        })),
      };

      const result = await saveShippingOrder(payload);
      if (result.success) {
        setIsModalOpen(false);
        fetchOrders();
        alert(isEditMode ? "출하지시가 수정되었습니다." : "출하지시가 등록되었습니다.");
      } else {
        alert(result.message || "저장 실패");
      }
    } catch (err: any) {
      alert(err.message || "저장 중 오류 발생");
    } finally {
      setSaving(false);
    }
  };

  const formatDate = (d: string) => d ? d.split("T")[0] : "-";

  const dataSourceTitle: Record<DataSourceType, string> = {
    shipmentPlan: "출하계획 목록",
    salesOrder: "수주정보 목록",
    itemInfo: "품목정보 목록",
  };

  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>
            <Input placeholder="검색" className="w-[160px] h-9" value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSearch()} />
          </div>
          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">거래처</Label>
            <Input placeholder="거래처 검색" className="w-[140px] h-9" value={searchCustomer}
              onChange={(e) => setSearchCustomer(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSearch()} />
          </div>
          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">상태</Label>
            <Select value={searchStatus} onValueChange={setSearchStatus}>
              <SelectTrigger className="w-[110px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
              <SelectContent>
                {STATUS_OPTIONS.map(o => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">출하일자</Label>
            <div className="flex items-center gap-2">
              <div className="w-[160px]">
                <FormDatePicker value={searchDateFrom} onChange={setSearchDateFrom} placeholder="시작일" />
              </div>
              <span className="text-muted-foreground">~</span>
              <div className="w-[160px]">
                <FormDatePicker value={searchDateTo} onChange={setSearchDateTo} placeholder="종료일" />
              </div>
            </div>
          </div>
          <div className="flex-1" />
          <div className="flex items-center gap-2">
            {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 메인 테이블 */}
      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
          <div className="font-semibold flex items-center gap-2 text-sm">
            <Truck className="w-5 h-5" /> 출하지시 관리
            <Badge variant="secondary" className="font-normal">{orders.length}건</Badge>
          </div>
          <div className="flex items-center gap-2">
            <Button size="sm" onClick={() => openModal()}>
              <Plus className="w-4 h-4 mr-1.5" /> 출하지시 등록
            </Button>
            <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDeleteSelected}>
              <Trash2 className="w-4 h-4 mr-1.5" /> 선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
            </Button>
          </div>
        </div>

        <div className="flex-1 overflow-auto">
          {loading ? (
            <div className="flex items-center justify-center h-32">
              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
            </div>
          ) : (
            <Table>
              <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
                <TableRow>
                  <TableHead className="w-[40px] text-center">
                    <Checkbox checked={orders.length > 0 && checkedIds.length === orders.length} onCheckedChange={handleCheckAll} />
                  </TableHead>
                  <TableHead className="w-[140px]">출하지시번호</TableHead>
                  <TableHead className="w-[100px] text-center">출하일자</TableHead>
                  <TableHead className="w-[120px]">거래처명</TableHead>
                  <TableHead className="w-[100px]">운송업체</TableHead>
                  <TableHead className="w-[90px]">차량번호</TableHead>
                  <TableHead className="w-[80px]">기사명</TableHead>
                  <TableHead className="w-[80px] text-center">상태</TableHead>
                  <TableHead className="w-[100px]">품번</TableHead>
                  <TableHead className="w-[130px]">품명</TableHead>
                  <TableHead className="w-[70px] text-right">수량</TableHead>
                  <TableHead className="w-[80px] text-center">소스</TableHead>
                  <TableHead>비고</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {orders.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={13} className="h-40 text-center text-muted-foreground">
                      <div className="flex flex-col items-center gap-2">
                        <Truck className="w-12 h-12 text-muted-foreground/30" />
                        <div className="font-medium">등록된 출하지시가 없습니다</div>
                        <div className="text-sm">출하지시 등록 버튼으로 등록하세요</div>
                      </div>
                    </TableCell>
                  </TableRow>
                ) : (
                  orders.map((order: any) => {
                    const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
                    if (items.length === 0) {
                      return (
                        <TableRow key={order.id} className="cursor-pointer hover:bg-muted/50" onClick={() => openModal(order)}>
                          <TableCell className="text-center" onClick={e => e.stopPropagation()}>
                            <Checkbox checked={checkedIds.includes(order.id)} onCheckedChange={(c) => {
                              if (c) setCheckedIds(p => [...p, order.id]);
                              else setCheckedIds(p => p.filter(i => i !== order.id));
                            }} />
                          </TableCell>
                          <TableCell className="font-medium">{order.instruction_no}</TableCell>
                          <TableCell className="text-center">{formatDate(order.instruction_date)}</TableCell>
                          <TableCell>{order.customer_name || "-"}</TableCell>
                          <TableCell>{order.carrier_name || "-"}</TableCell>
                          <TableCell>{order.vehicle_no || "-"}</TableCell>
                          <TableCell>{order.driver_name || "-"}</TableCell>
                          <TableCell className="text-center">
                            <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(order.status))}>{getStatusLabel(order.status)}</span>
                          </TableCell>
                          <TableCell>-</TableCell>
                          <TableCell>-</TableCell>
                          <TableCell className="text-right">0</TableCell>
                          <TableCell className="text-center">-</TableCell>
                          <TableCell className="text-xs text-muted-foreground truncate max-w-[100px]">{order.memo || "-"}</TableCell>
                        </TableRow>
                      );
                    }
                    return items.map((item: any, itemIdx: number) => (
                      <TableRow key={`${order.id}-${item.id}`} className="cursor-pointer hover:bg-muted/50" onClick={() => openModal(order)}>
                        <TableCell className="text-center" onClick={e => e.stopPropagation()}>
                          {itemIdx === 0 && <Checkbox checked={checkedIds.includes(order.id)} onCheckedChange={(c) => {
                            if (c) setCheckedIds(p => [...p, order.id]);
                            else setCheckedIds(p => p.filter(i => i !== order.id));
                          }} />}
                        </TableCell>
                        <TableCell className="font-medium">{itemIdx === 0 ? order.instruction_no : ""}</TableCell>
                        <TableCell className="text-center">{itemIdx === 0 ? formatDate(order.instruction_date) : ""}</TableCell>
                        <TableCell>{itemIdx === 0 ? (order.customer_name || "-") : ""}</TableCell>
                        <TableCell>{itemIdx === 0 ? (order.carrier_name || "-") : ""}</TableCell>
                        <TableCell>{itemIdx === 0 ? (order.vehicle_no || "-") : ""}</TableCell>
                        <TableCell>{itemIdx === 0 ? (order.driver_name || "-") : ""}</TableCell>
                        <TableCell className="text-center">
                          {itemIdx === 0 && <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(order.status))}>{getStatusLabel(order.status)}</span>}
                        </TableCell>
                        <TableCell className="text-xs text-muted-foreground">{item.item_code}</TableCell>
                        <TableCell className="font-medium text-sm">{item.item_name}</TableCell>
                        <TableCell className="text-right">{Number(item.order_qty || 0).toLocaleString()}</TableCell>
                        <TableCell className="text-center">
                          {(() => { const b = getSourceBadge(item.source_type || ""); return <span className={cn("px-2 py-0.5 rounded-full text-[10px]", b.cls)}>{b.label}</span>; })()}
                        </TableCell>
                        <TableCell className="text-xs text-muted-foreground truncate max-w-[100px]">{itemIdx === 0 ? (order.memo || "-") : ""}</TableCell>
                      </TableRow>
                    ));
                  })
                )}
              </TableBody>
            </Table>
          )}
        </div>
      </div>

      {/* 등록/수정 모달 */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="max-w-[90vw] max-h-[90vh] w-[1400px] p-0 flex flex-col overflow-hidden">
          <DialogHeader className="p-5 pb-4 border-b bg-primary text-primary-foreground shrink-0">
            <DialogTitle className="text-lg">{isEditMode ? "출하지시 수정" : "출하지시 등록"}</DialogTitle>
            <DialogDescription className="text-primary-foreground/70">
              {isEditMode ? "출하지시 정보를 수정합니다." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력하세요."}
            </DialogDescription>
          </DialogHeader>

          <div className="flex-1 overflow-hidden">
            <ResizablePanelGroup direction="horizontal">
              {/* 왼쪽: 데이터 소스 */}
              <ResizablePanel defaultSize={55} minSize={30}>
                <div className="flex flex-col h-full">
                  <div className="p-3 border-b bg-muted/30 flex flex-wrap items-center gap-2 shrink-0">
                    <Select value={dataSource} onValueChange={(v) => setDataSource(v as DataSourceType)}>
                      <SelectTrigger className="w-[130px] h-8 text-xs"><SelectValue /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="shipmentPlan">출하계획</SelectItem>
                        <SelectItem value="salesOrder">수주정보</SelectItem>
                        <SelectItem value="itemInfo">품목정보</SelectItem>
                      </SelectContent>
                    </Select>
                    <Input placeholder="품번, 품명 검색" className="flex-1 h-8 text-xs min-w-[120px]"
                      value={sourceKeyword} onChange={(e) => setSourceKeyword(e.target.value)}
                      onKeyDown={(e) => { if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }}} />
                    <Button size="sm" className="h-8 text-xs" onClick={() => { setSourcePage(1); fetchSourceData(1); }} disabled={sourceLoading}>
                      {sourceLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Search className="w-3 h-3" />}
                      <span className="ml-1">조회</span>
                    </Button>
                  </div>

                  <div className="px-4 py-2 flex items-center justify-between border-b shrink-0">
                    <div className="text-sm font-medium">
                      {dataSourceTitle[dataSource]}
                      <span className="text-muted-foreground ml-2 font-normal">
                        선택: <span className="text-primary font-semibold">{selectedItems.length}</span>개
                      </span>
                    </div>
                  </div>

                  <div className="flex-1 overflow-auto">
                    {sourceLoading ? (
                      <div className="flex items-center justify-center py-12"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
                    ) : sourceData.length === 0 ? (
                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                        <div className="text-sm">조회 버튼을 눌러 데이터를 불러오세요</div>
                      </div>
                    ) : (
                      <Table>
                        <TableHeader className="sticky top-0 bg-background z-10">
                          <TableRow>
                            <TableHead className="w-[40px] text-center">선택</TableHead>
                            <TableHead className="w-[100px]">품번</TableHead>
                            <TableHead>품명</TableHead>
                            <TableHead className="w-[100px]">규격</TableHead>
                            <TableHead className="w-[100px]">거래처</TableHead>
                            <TableHead className="w-[70px] text-right">수량</TableHead>
                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center">상태</TableHead>}
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {sourceData.map((item: any, idx: number) => {
                            const itemId = dataSource === "itemInfo" ? item.item_code : item.id;
                            const isSelected = selectedItems.some(s => {
                              // 같은 소스 타입에서 id 매칭
                              if (s.sourceType === dataSource) {
                                if (dataSource === "itemInfo") return s.itemCode === itemId;
                                return String(s.id) === String(itemId);
                              }
                              // 다른 소스 타입이라도 같은 품번이면 중복 방지
                              if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
                              if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
                              return false;
                            });
                            return (
                              <TableRow key={`${dataSource}-${itemId}-${idx}`} className={cn("cursor-pointer hover:bg-muted/50", isSelected && "bg-primary/5")} onClick={() => toggleSourceItem(item)}>
                                <TableCell className="text-center" onClick={e => e.stopPropagation()}>
                                  <Checkbox checked={isSelected} onCheckedChange={() => toggleSourceItem(item)} />
                                </TableCell>
                                <TableCell className="text-xs">{item.item_code || "-"}</TableCell>
                                <TableCell className="text-sm font-medium">{item.item_name || "-"}</TableCell>
                                <TableCell className="text-xs text-muted-foreground">{item.spec || "-"}</TableCell>
                                <TableCell className="text-xs">{item.customer_name || "-"}</TableCell>
                                <TableCell className="text-right text-xs">{Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}</TableCell>
                                {dataSource === "shipmentPlan" && (
                                  <TableCell className="text-center">
                                    <Badge variant="secondary" className="text-[10px]">{getStatusLabel(item.status)}</Badge>
                                  </TableCell>
                                )}
                              </TableRow>
                            );
                          })}
                        </TableBody>
                      </Table>
                    )}
                  </div>

                  {/* 페이징 */}
                  {sourceTotalCount > 0 && (
                    <div className="px-4 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
                      <span className="text-xs text-muted-foreground">
                        총 {sourceTotalCount}건 중 {(sourcePage - 1) * sourcePageSize + 1}-{Math.min(sourcePage * sourcePageSize, sourceTotalCount)}건
                      </span>
                      <div className="flex items-center gap-1">
                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
                          onClick={() => { const p = sourcePage - 1; setSourcePage(p); fetchSourceData(p); }}>
                          <ChevronLeft className="w-3.5 h-3.5" />
                        </Button>
                        <span className="text-xs font-medium px-2">{sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}</span>
                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
                          onClick={() => { const p = sourcePage + 1; setSourcePage(p); fetchSourceData(p); }}>
                          <ChevronRight className="w-3.5 h-3.5" />
                        </Button>
                      </div>
                    </div>
                  )}
                </div>
              </ResizablePanel>

              <ResizableHandle withHandle />

              {/* 오른쪽: 폼 */}
              <ResizablePanel defaultSize={45} minSize={30}>
                <div className="flex flex-col h-full overflow-auto p-5 bg-muted/20 gap-5">
                  {/* 기본 정보 */}
                  <div className="bg-background border rounded-lg p-5 shrink-0">
                    <h3 className="text-sm font-semibold mb-4">기본 정보</h3>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-1.5">
                        <Label className="text-xs">출하지시번호</Label>
                        <Input value={formOrderNumber} readOnly className="h-9 bg-muted/50 text-muted-foreground" />
                      </div>
                      <div className="space-y-1.5">
                        <Label className="text-xs">출하지시일 <span className="text-destructive">*</span></Label>
                        <FormDatePicker value={formOrderDate} onChange={setFormOrderDate} placeholder="날짜 선택" />
                      </div>
                      <div className="space-y-1.5">
                        <Label className="text-xs">거래처</Label>
                        <Input value={formCustomer} readOnly placeholder="품목 선택 시 자동" className="h-9 bg-muted/50" />
                      </div>
                      <div className="space-y-1.5">
                        <Label className="text-xs">상태</Label>
                        <Select value={formStatus} onValueChange={setFormStatus}>
                          <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                          <SelectContent>
                            <SelectItem value="READY">준비중</SelectItem>
                            <SelectItem value="IN_PROGRESS">진행중</SelectItem>
                            <SelectItem value="COMPLETED">완료</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>

                  {/* 운송 정보 */}
                  <div className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden shrink-0">
                    <button className="w-full px-5 py-3 flex items-center justify-between text-left" onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}>
                      <h3 className="text-sm font-semibold text-amber-900 flex items-center gap-2">
                        <Truck className="w-4 h-4" /> 운송 정보 <span className="text-[11px] font-normal text-muted-foreground">(선택사항)</span>
                      </h3>
                      {isTransportCollapsed ? <ChevronRight className="w-4 h-4 text-amber-700" /> : <ChevronDown className="w-4 h-4 text-amber-700" />}
                    </button>
                    {!isTransportCollapsed && (
                      <div className="px-5 pb-4 grid grid-cols-3 gap-3">
                        <div className="space-y-1.5"><Label className="text-xs">운송업체</Label><Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" /></div>
                        <div className="space-y-1.5"><Label className="text-xs">차량번호</Label><Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" /></div>
                        <div className="space-y-1.5"><Label className="text-xs">기사명</Label><Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" /></div>
                        <div className="space-y-1.5"><Label className="text-xs">연락처</Label><Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" /></div>
                        <div className="space-y-1.5"><Label className="text-xs">도착예정일시</Label><FormDatePicker value={formArrival} onChange={setFormArrival} placeholder="도착예정일시" includeTime /></div>
                        <div className="space-y-1.5"><Label className="text-xs">배송지</Label><Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" /></div>
                      </div>
                    )}
                  </div>

                  {/* 선택된 품목 */}
                  <div className="bg-background border rounded-lg p-5 flex-1 flex flex-col min-h-[200px]">
                    <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
                      선택된 품목 <Badge variant="default" className="text-[10px]">{selectedItems.length}</Badge>
                    </h3>
                    <div className="flex-1 overflow-auto min-h-0">
                      {selectedItems.length === 0 ? (
                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
                          <div className="text-sm">왼쪽에서 데이터를 선택하세요</div>
                        </div>
                      ) : (
                        <Table>
                          <TableHeader className="sticky top-0 bg-background z-10">
                            <TableRow>
                              <TableHead className="w-[40px] text-center">소스</TableHead>
                              <TableHead className="w-[90px]">품번</TableHead>
                              <TableHead>품명</TableHead>
                              <TableHead className="w-[90px] text-center">출하수량</TableHead>
                              <TableHead className="w-[70px] text-right">계획수량</TableHead>
                              <TableHead className="w-[40px] text-center">삭제</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {selectedItems.map((item, idx) => {
                              const b = getSourceBadge(item.sourceType);
                              return (
                                <TableRow key={`${item.sourceType}-${item.id}-${idx}`}>
                                  <TableCell className="text-center">
                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px]", b.cls)}>{b.label.charAt(0)}</span>
                                  </TableCell>
                                  <TableCell className="text-xs">{item.itemCode}</TableCell>
                                  <TableCell className="text-sm font-medium">{item.itemName}</TableCell>
                                  <TableCell className="text-center">
                                    <Input type="number" value={item.orderQty} onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
                                      min={1} className="h-7 w-[70px] text-xs text-right mx-auto" />
                                  </TableCell>
                                  <TableCell className="text-right text-xs">{item.planQty ? item.planQty.toLocaleString() : "-"}</TableCell>
                                  <TableCell className="text-center">
                                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeSelectedItem(idx)}>
                                      <X className="w-3.5 h-3.5 text-destructive" />
                                    </Button>
                                  </TableCell>
                                </TableRow>
                              );
                            })}
                          </TableBody>
                        </Table>
                      )}
                    </div>
                  </div>

                  {/* 메모 */}
                  <div className="bg-background border rounded-lg p-5 shrink-0">
                    <h3 className="text-sm font-semibold mb-3">메모</h3>
                    <Textarea value={formMemo} onChange={(e) => setFormMemo(e.target.value)} placeholder="출하지시 관련 메모" rows={2} className="resize-y" />
                  </div>
                </div>
              </ResizablePanel>
            </ResizablePanelGroup>
          </div>

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