"use client";

import React, { useState, useMemo, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { X, Save, Loader2, Inbox, Settings2 } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  getShipmentPlanList,
  updateShipmentPlan,
  type ShipmentPlanListItem,
} from "@/lib/api/shipping";
import { useTableSettings } from "@/hooks/useTableSettings";
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";

const GRID_COLUMNS = [
  { key: "order_no", label: "수주번호" },
  { key: "due_date", label: "납기일" },
  { key: "customer_name", label: "거래처" },
  { key: "part_code", label: "품목코드" },
  { key: "part_name", label: "품목명" },
  { key: "order_qty", label: "수주수량" },
  { key: "plan_qty", label: "계획수량" },
  { key: "plan_date", label: "계획일" },
  { key: "status", label: "상태" },
];

const STATUS_OPTIONS = [
  { value: "all", label: "전체" },
  { value: "READY", label: "준비" },
  { value: "CONFIRMED", label: "확정" },
  { value: "SHIPPING", label: "출하중" },
  { value: "COMPLETED", label: "완료" },
  { value: "CANCEL_REQUEST", label: "취소요청" },
  { value: "CANCELLED", label: "취소완료" },
];

const getStatusLabel = (status: string) => {
  const found = STATUS_OPTIONS.find(o => o.value === status);
  return found?.label || status;
};

const getStatusColor = (status: string) => {
  switch (status) {
    case "READY": return "bg-primary/10 text-primary";
    case "CONFIRMED": return "bg-secondary text-secondary-foreground";
    case "SHIPPING": return "bg-warning/10 text-warning";
    case "COMPLETED": return "bg-success/10 text-success";
    case "CANCEL_REQUEST": return "bg-destructive/10 text-destructive";
    case "CANCELLED": return "bg-muted text-muted-foreground";
    default: return "bg-muted text-muted-foreground";
  }
};

export default function ShippingPlanPage() {
  const ts = useTableSettings("c16-shipping-plan", "shipment_plan", GRID_COLUMNS);
  const [data, setData] = useState<ShipmentPlanListItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [checkedIds, setCheckedIds] = useState<number[]>([]);

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

  // 서버 페이징
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(50);
  const [totalCount, setTotalCount] = useState(0);

  // 상세 패널 편집
  const [editPlanQty, setEditPlanQty] = useState("");
  const [editPlanDate, setEditPlanDate] = useState("");
  const [editMemo, setEditMemo] = useState("");
  const [isDetailChanged, setIsDetailChanged] = useState(false);
  const [saving, setSaving] = useState(false);


  // 데이터 조회
  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const params: any = { page: currentPage, size: pageSize };
      for (const f of searchFilters) {
        if (f.columnName === "plan_date" && f.operator === "between" && f.value) {
          const [from, to] = f.value.split(",");
          if (from) params.dateFrom = from;
          if (to) params.dateTo = to;
        } else if (f.columnName === "status") {
          params.status = f.value;
        } else if (f.columnName === "customer_name") {
          params.customer = f.value;
        } else {
          params.keyword = f.value;
        }
      }

      const result = await getShipmentPlanList(params);
      if (result.success) {
        setData(result.data || []);
        setTotalCount(result.total ?? result.data?.length ?? 0);
      }
    } catch (err) {
      console.error("출하계획 조회 실패:", err);
    } finally {
      setLoading(false);
    }
  }, [searchFilters, currentPage, pageSize]);

  // searchFilters 변경 시 자동 조회 + 1페이지로 리셋
  useEffect(() => {
    fetchData();
  }, [fetchData]);

  useEffect(() => {
    setCurrentPage(1);
  }, [searchFilters]);

  const selectedPlan = useMemo(() => data.find(p => p.id === selectedId), [data, selectedId]);

  const groupedData = useMemo(() => {
    const grouped = ts.groupData(data);
    const orderMap = new Map<string, any[]>();
    const orderKeys: string[] = [];
    grouped.forEach(plan => {
      const key = (plan as any)._isGroupSummary ? `_summary_${orderKeys.length}` : (plan.order_no || `_no_order_${plan.id}`);
      if (!orderMap.has(key)) {
        orderMap.set(key, []);
        orderKeys.push(key);
      }
      orderMap.get(key)!.push(plan);
    });
    return orderKeys.map(key => ({
      orderNo: key,
      plans: orderMap.get(key)!,
    }));
  }, [data, ts.groupData]);

  const handleRowClick = (plan: ShipmentPlanListItem) => {
    if (isDetailChanged && selectedId !== plan.id) {
      if (!confirm("변경사항이 있습니다. 저장하지 않고 이동하시겠습니까?")) return;
    }
    setSelectedId(plan.id);
    setEditPlanQty(String(Number(plan.plan_qty)));
    setEditPlanDate(plan.plan_date ? plan.plan_date.split("T")[0] : "");
    setEditMemo(plan.memo || "");
    setIsDetailChanged(false);
  };

  const handleCheckAll = (checked: boolean) => {
    if (checked) {
      setCheckedIds(data.filter(p => p.status !== "CANCELLED").map(p => p.id));
    } else {
      setCheckedIds([]);
    }
  };

  const handleSaveDetail = async () => {
    if (!selectedId || !selectedPlan) return;

    const qty = Number(editPlanQty);
    if (qty <= 0) {
      alert("계획수량은 0보다 커야 해요.");
      return;
    }
    if (!editPlanDate) {
      alert("출하계획일을 입력해주세요.");
      return;
    }

    setSaving(true);
    try {
      const result = await updateShipmentPlan(selectedId, {
        planQty: qty,
        planDate: editPlanDate,
        memo: editMemo,
      });
      if (result.success) {
        setIsDetailChanged(false);
        alert("저장되었어요.");
        fetchData();
      } else {
        alert(result.message || "저장 실패");
      }
    } catch (err: any) {
      alert(err.message || "저장 중 오류 발생");
    } finally {
      setSaving(false);
    }
  };

  const formatDate = (dateStr: string) => {
    if (!dateStr) return "-";
    return dateStr.split("T")[0];
  };

  const formatNumber = (val: string | number) => {
    const num = Number(val);
    return isNaN(num) ? "0" : num.toLocaleString();
  };

  return (
    <div className="flex flex-col h-full p-4 gap-3">
      {/* 브레드크럼 */}
      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
        <span>영업관리</span>
        <span className="text-muted-foreground/40">/</span>
        <span className="font-semibold text-foreground">출하계획</span>
      </nav>

      {/* 검색 필터 (DynamicSearchFilter) */}
      <DynamicSearchFilter
        tableName="shipment_plan"
        filterId="c16-shipping-plan"
        onFilterChange={setSearchFilters}
        dataCount={totalCount}
        externalFilterConfig={ts.filterConfig}
      />

      {/* 마스터-디테일 */}
      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
        <ResizablePanelGroup direction="horizontal">
          {/* 좌측: 출하계획 목록 */}
          <ResizablePanel defaultSize={60} minSize={30}>
            <div className="flex flex-col h-full">
              {/* 패널 헤더 */}
              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
                <div className="flex items-center gap-2">
                  <span className="text-[13px] font-bold text-foreground">출하계획 목록</span>
                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
                    {totalCount}건
                  </span>
                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
                </div>
                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
                  <Settings2 className="h-4 w-4" />
                </Button>
              </div>

              {/* 테이블 */}
              <div className="flex-1 overflow-auto">
                <EDataTable
                  columns={[
                    { key: "order_no", label: "수주번호", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
                    { key: "due_date", label: "납기일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
                    { key: "customer_name", label: "거래처", render: (val: any) => <span className="text-sm">{val || "-"}</span> },
                    { key: "part_code", label: "품목코드", render: (val: any) => <span className="text-muted-foreground text-[13px]">{val || "-"}</span> },
                    { key: "part_name", label: "품목명", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
                    { key: "order_qty", label: "수주수량", align: "right" as const, formatNumber: true },
                    { key: "plan_qty", label: "계획수량", align: "right" as const, render: (val: any) => <span className="font-semibold text-primary text-sm">{formatNumber(val)}</span> },
                    { key: "plan_date", label: "계획일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
                    { key: "status", label: "상태", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>{getStatusLabel(val)}</span> },
                  ] as EDataTableColumn<ShipmentPlanListItem>[]}
                  data={data}
                  rowKey={(row) => String(row.id)}
                  loading={loading}
                  emptyMessage="출하계획이 없어요"
                  selectedId={selectedId !== null ? String(selectedId) : null}
                  onSelect={(id) => {
                    if (id) {
                      const plan = data.find(p => String(p.id) === id);
                      if (plan) handleRowClick(plan);
                    }
                  }}
                  onRowClick={(row) => handleRowClick(row)}
                  showCheckbox
                  checkedIds={checkedIds.map(String)}
                  onCheckedChange={(ids) => setCheckedIds(ids.map(Number))}
                  showPagination
                  serverPagination
                  serverCurrentPage={currentPage}
                  serverPageSize={pageSize}
                  serverTotalCount={totalCount}
                  onServerPageChange={setCurrentPage}
                  onServerPageSizeChange={(s) => { setPageSize(s); setCurrentPage(1); }}
                  defaultPageSize={pageSize}
                  draggableColumns={false}
                />
              </div>
            </div>
          </ResizablePanel>

          <ResizableHandle withHandle />

          {/* 우측: 상세 패널 */}
          <ResizablePanel defaultSize={40} minSize={20}>
            <div className="flex flex-col h-full">
              {/* 패널 헤더 */}
              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
                <div className="flex items-center gap-2">
                  <span className="text-[13px] font-bold text-foreground">출하계획 상세</span>
                  {selectedPlan && (
                    <span className="text-[11px] font-mono text-muted-foreground">{selectedPlan.shipment_plan_no}</span>
                  )}
                </div>
                {selectedPlan && (
                  <div className="flex items-center gap-1.5">
                    <Button
                      size="sm"
                      onClick={handleSaveDetail}
                      disabled={!isDetailChanged || saving}
                      variant={isDetailChanged ? "default" : "secondary"}
                    >
                      {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
                      저장
                    </Button>
                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setSelectedId(null)}>
                      <X className="w-3.5 h-3.5" />
                    </Button>
                  </div>
                )}
              </div>

              {/* 상세 컨텐츠 */}
              {selectedPlan ? (
                <div className="flex-1 overflow-auto p-4 space-y-4">
                  {/* 기본 정보 */}
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
                      <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium inline-block", getStatusColor(selectedPlan.status))}>
                        {getStatusLabel(selectedPlan.status)}
                      </span>
                    </div>
                    <div>
                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
                      <p className="text-sm font-mono text-muted-foreground">{selectedPlan.order_no || "-"}</p>
                    </div>
                    <div>
                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처</p>
                      <p className="text-sm font-medium text-foreground">{selectedPlan.customer_name || "-"}</p>
                    </div>
                    <div>
                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">납기일</p>
                      <p className="text-sm text-foreground">{formatDate(selectedPlan.due_date)}</p>
                    </div>
                  </div>

                  <div className="border-t" />

                  {/* 품목 정보 */}
                  <div>
                    <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-2">품목 정보</p>
                    <div className="grid grid-cols-2 gap-3 bg-muted/30 border rounded-md p-3">
                      <div>
                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목코드</p>
                        <p className="text-sm font-mono text-muted-foreground">{selectedPlan.part_code || "-"}</p>
                      </div>
                      <div>
                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목명</p>
                        <p className="text-sm font-medium text-foreground">{selectedPlan.part_name || "-"}</p>
                      </div>
                      <div>
                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">규격</p>
                        <p className="text-sm text-foreground">{selectedPlan.spec || "-"}</p>
                      </div>
                      <div>
                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">재질</p>
                        <p className="text-sm text-foreground">{selectedPlan.material || "-"}</p>
                      </div>
                    </div>
                  </div>

                  <div className="border-t" />

                  {/* 수량 정보 */}
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주수량</p>
                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.order_qty)}</p>
                    </div>
                    <div>
                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">계획수량</Label>
                      <Input
                        type="number"
                        className="h-9"
                        value={editPlanQty}
                        onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
                      />
                    </div>
                    <div>
                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">출하수량</p>
                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.shipped_qty)}</p>
                    </div>
                    <div>
                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">잔여수량</p>
                      <p className={cn(
                        "font-semibold text-sm",
                        (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
                          ? "text-destructive"
                          : "text-success"
                      )}>
                        {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
                      </p>
                    </div>
                  </div>

                  <div className="border-t" />

                  {/* 출하 정보 */}
                  <div className="space-y-3">
                    <div>
                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">출하계획일</Label>
                      <Input
                        type="date"
                        className="h-9"
                        value={editPlanDate}
                        onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
                      />
                    </div>
                    <div>
                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">비고</Label>
                      <Textarea
                        className="min-h-[80px] resize-y text-sm"
                        value={editMemo}
                        onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
                        placeholder="비고를 입력해주세요"
                      />
                    </div>
                  </div>

                  <div className="border-t" />

                  {/* 등록 정보 */}
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록자</p>
                      <p className="text-sm text-foreground">{selectedPlan.created_by || "-"}</p>
                    </div>
                    <div>
                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록일시</p>
                      <p className="text-sm text-foreground">
                        {selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}
                      </p>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center h-full text-center p-8 text-muted-foreground">
                  <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center mb-4">
                    <Inbox className="w-6 h-6 text-muted-foreground/30" />
                  </div>
                  <p className="text-sm font-medium">좌측에서 출하계획을 선택해주세요</p>
                  <p className="text-xs text-muted-foreground/60 mt-1">선택하면 상세 정보가 표시돼요</p>
                </div>
              )}
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>

      <TableSettingsModal
        open={ts.open}
        onOpenChange={ts.setOpen}
        tableName={ts.tableName}
        settingsId={ts.settingsId}
        defaultVisibleKeys={ts.defaultVisibleKeys}
        onSave={ts.applySettings}
      />
    </div>
  );
}
