"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 { 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 { Search, Download, X, Save, Ban, RotateCcw, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  getShipmentPlanList,
  updateShipmentPlan,
  type ShipmentPlanListItem,
} from "@/lib/api/shipping";

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-blue-100 text-blue-800 border-blue-200";
    case "CONFIRMED": return "bg-indigo-100 text-indigo-800 border-indigo-200";
    case "SHIPPING": return "bg-amber-100 text-amber-800 border-amber-200";
    case "COMPLETED": return "bg-emerald-100 text-emerald-800 border-emerald-200";
    case "CANCEL_REQUEST": return "bg-rose-100 text-rose-800 border-rose-200";
    case "CANCELLED": return "bg-slate-100 text-slate-800 border-slate-200";
    default: return "bg-gray-100 text-gray-800 border-gray-200";
  }
};

export default function ShippingPlanPage() {
  const [data, setData] = useState<ShipmentPlanListItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [checkedIds, setCheckedIds] = useState<number[]>([]);

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

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

  // 날짜 초기화
  useEffect(() => {
    const today = new Date();
    const threeMonthsAgo = new Date(today);
    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
    const oneMonthLater = new Date(today);
    oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);

    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
    setSearchDateTo(oneMonthLater.toISOString().split("T")[0]);
  }, []);

  // 데이터 조회
  const fetchData = 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 (searchCustomer.trim()) params.customer = searchCustomer.trim();
      if (searchKeyword.trim()) params.keyword = searchKeyword.trim();

      const result = await getShipmentPlanList(params);
      if (result.success) {
        setData(result.data || []);
      }
    } catch (err) {
      console.error("출하계획 조회 실패:", err);
    } finally {
      setLoading(false);
    }
  }, [searchDateFrom, searchDateTo, searchStatus, searchCustomer, searchKeyword]);

  // 초기 로드 + 검색 시 자동 조회
  useEffect(() => {
    if (searchDateFrom && searchDateTo) {
      fetchData();
    }
  }, [searchDateFrom, searchDateTo]);

  const handleSearch = () => fetchData();

  const handleResetSearch = () => {
    setSearchStatus("all");
    setSearchCustomer("");
    setSearchKeyword("");
    const today = new Date();
    const threeMonthsAgo = new Date(today);
    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
    const oneMonthLater = new Date(today);
    oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
    setSearchDateTo(oneMonthLater.toISOString().split("T")[0]);
  };

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

  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 handleCheck = (id: number, checked: boolean) => {
    if (checked) {
      setCheckedIds(prev => [...prev, id]);
    } else {
      setCheckedIds(prev => prev.filter(i => i !== id));
    }
  };

  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-[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={searchStatus} onValueChange={setSearchStatus}>
              <SelectTrigger className="w-[120px] 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>
            <Input
              placeholder="거래처 검색"
              className="w-[150px] 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>
            <Input
              placeholder="수주번호 / 품목 검색"
              className="w-[220px] h-9"
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
            />
          </div>

          <div className="flex-1" />

          <div className="flex items-center gap-2">
            <Button size="sm" className="h-9" onClick={handleSearch} disabled={loading}>
              {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Search className="w-4 h-4 mr-2" />}
              조회
            </Button>
            <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">
        <ResizablePanelGroup direction="horizontal">
          <ResizablePanel defaultSize={selectedId ? 65 : 100} minSize={30}>
            <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 text-sm">
                  출하계획 목록
                  <Badge variant="secondary" className="font-normal">
                    {data.length}건
                  </Badge>
                </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={data.length > 0 && checkedIds.length === data.filter(p => p.status !== "CANCELLED").length}
                            onCheckedChange={handleCheckAll}
                          />
                        </TableHead>
                        <TableHead className="w-[50px] text-center">No</TableHead>
                        <TableHead className="w-[80px]">상태</TableHead>
                        <TableHead className="w-[140px]">수주번호</TableHead>
                        <TableHead className="w-[120px]">거래처</TableHead>
                        <TableHead className="w-[100px]">품목코드</TableHead>
                        <TableHead>품목명</TableHead>
                        <TableHead className="w-[80px] text-right">수주수량</TableHead>
                        <TableHead className="w-[80px] text-right">계획수량</TableHead>
                        <TableHead className="w-[100px] text-center">출하계획일</TableHead>
                        <TableHead className="w-[100px] text-center">납기일</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {data.length === 0 ? (
                        <TableRow>
                          <TableCell colSpan={11} className="h-32 text-center text-muted-foreground">
                            출하계획이 없습니다.
                          </TableCell>
                        </TableRow>
                      ) : (
                        data.map((plan, idx) => (
                          <TableRow
                            key={plan.id}
                            className={cn(
                              "cursor-pointer hover:bg-muted/50 transition-colors",
                              selectedId === plan.id && "bg-primary/5",
                              plan.status === "CANCELLED" && "opacity-60 bg-slate-50"
                            )}
                            onClick={() => handleRowClick(plan)}
                          >
                            <TableCell className="text-center" onClick={e => e.stopPropagation()}>
                              <Checkbox
                                checked={checkedIds.includes(plan.id)}
                                onCheckedChange={(c) => handleCheck(plan.id, c as boolean)}
                                disabled={plan.status === "CANCELLED"}
                              />
                            </TableCell>
                            <TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
                            <TableCell>
                              <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(plan.status))}>
                                {getStatusLabel(plan.status)}
                              </span>
                            </TableCell>
                            <TableCell className="font-medium">{plan.order_no || "-"}</TableCell>
                            <TableCell>{plan.customer_name || "-"}</TableCell>
                            <TableCell className="text-muted-foreground text-xs">{plan.part_code || "-"}</TableCell>
                            <TableCell className="font-medium">{plan.part_name || "-"}</TableCell>
                            <TableCell className="text-right">{formatNumber(plan.order_qty)}</TableCell>
                            <TableCell className="text-right font-semibold text-primary">{formatNumber(plan.plan_qty)}</TableCell>
                            <TableCell className="text-center">{formatDate(plan.plan_date)}</TableCell>
                            <TableCell className="text-center">{formatDate(plan.due_date)}</TableCell>
                          </TableRow>
                        ))
                      )}
                    </TableBody>
                  </Table>
                )}
              </div>
            </div>
          </ResizablePanel>

          {/* 상세 패널 */}
          {selectedId && selectedPlan && (
            <>
              <ResizableHandle withHandle />
              <ResizablePanel defaultSize={35} minSize={25}>
                <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 text-sm">
                      {selectedPlan.shipment_plan_no || `#${selectedPlan.id}`}
                    </span>
                    <div className="flex items-center gap-2">
                      <Button
                        size="sm"
                        onClick={handleSaveDetail}
                        disabled={!isDetailChanged || saving}
                        className={cn(isDetailChanged ? "bg-primary" : "bg-muted text-muted-foreground")}
                      >
                        {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
                        저장
                      </Button>
                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setSelectedId(null)}>
                        <X className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>

                  <div className="flex-1 overflow-auto p-4 space-y-6">
                    {/* 기본 정보 */}
                    <section>
                      <h3 className="text-sm font-semibold mb-3">기본 정보</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">{selectedPlan.shipment_plan_no || "-"}</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", getStatusColor(selectedPlan.status))}>
                            {getStatusLabel(selectedPlan.status)}
                          </span>
                        </div>
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">수주번호</span>
                          <span>{selectedPlan.order_no || "-"}</span>
                        </div>
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">거래처</span>
                          <span>{selectedPlan.customer_name || "-"}</span>
                        </div>
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">등록일</span>
                          <span>{formatDate(selectedPlan.created_date)}</span>
                        </div>
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">납기일</span>
                          <span>{formatDate(selectedPlan.due_date)}</span>
                        </div>
                      </div>
                    </section>

                    {/* 품목 정보 */}
                    <section>
                      <h3 className="text-sm font-semibold mb-3">품목 정보</h3>
                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm bg-muted/30 p-3 rounded-md border border-border/50">
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">품목코드</span>
                          <span>{selectedPlan.part_code || "-"}</span>
                        </div>
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">품목명</span>
                          <span className="font-medium">{selectedPlan.part_name || "-"}</span>
                        </div>
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">규격</span>
                          <span>{selectedPlan.spec || "-"}</span>
                        </div>
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">재질</span>
                          <span>{selectedPlan.material || "-"}</span>
                        </div>
                      </div>
                    </section>

                    {/* 수량 정보 */}
                    <section>
                      <h3 className="text-sm font-semibold mb-3">수량 정보</h3>
                      <div className="grid grid-cols-2 gap-x-4 gap-y-4 text-sm">
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">수주수량</span>
                          <span>{formatNumber(selectedPlan.order_qty)}</span>
                        </div>
                        <div>
                          <Label className="text-muted-foreground text-xs block mb-1">계획수량</Label>
                          <Input
                            type="number"
                            className="h-8"
                            value={editPlanQty}
                            onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
                          />
                        </div>
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">출하수량</span>
                          <span>{formatNumber(selectedPlan.shipped_qty)}</span>
                        </div>
                        <div>
                          <span className="text-muted-foreground text-xs block mb-1">잔여수량</span>
                          <span className={cn("font-semibold",
                            (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
                              ? "text-destructive"
                              : "text-emerald-600"
                          )}>
                            {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
                          </span>
                        </div>
                      </div>
                    </section>

                    {/* 출하 정보 */}
                    <section>
                      <h3 className="text-sm font-semibold mb-3">출하 정보</h3>
                      <div className="grid grid-cols-2 gap-x-4 gap-y-4 text-sm">
                        <div className="col-span-2">
                          <Label className="text-muted-foreground text-xs block mb-1">출하계획일</Label>
                          <Input
                            type="date"
                            className="h-8"
                            value={editPlanDate}
                            onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
                          />
                        </div>
                        <div className="col-span-2">
                          <Label className="text-muted-foreground text-xs block mb-1">비고</Label>
                          <Textarea
                            className="min-h-[80px] resize-y"
                            value={editMemo}
                            onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
                            placeholder="비고 입력"
                          />
                        </div>
                      </div>
                    </section>

                    {/* 등록자 정보 */}
                    <section>
                      <h3 className="text-sm font-semibold mb-3">등록 정보</h3>
                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm text-muted-foreground">
                        <div>
                          <span className="text-xs block mb-1">등록자</span>
                          <span className="text-foreground">{selectedPlan.created_by || "-"}</span>
                        </div>
                        <div>
                          <span className="text-xs block mb-1">등록일시</span>
                          <span className="text-foreground">{selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}</span>
                        </div>
                      </div>
                    </section>
                  </div>
                </div>
              </ResizablePanel>
            </>
          )}
        </ResizablePanelGroup>
      </div>
    </div>
  );
}