"use client";

/**
 * 수주 수정 컴포넌트 (Edit Mode)
 * IntegratedDetailTemplate 마이그레이션 완료 (2026-01-20)
 *
 * - 기본 정보 (읽기전용)
 * - 수주/배송 정보 (편집 가능)
 * - 비고 (편집 가능)
 * - 품목 내역 (생산 시작 후 수정 불가)
 */

import { useState, useEffect, useMemo, useCallback } from "react";
import { useRouter } from "next/navigation";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { PhoneInput } from "@/components/ui/phone-input";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { AlertTriangle } from "lucide-react";
import { toast } from "sonner";
import { IntegratedDetailTemplate } from "@/components/templates/IntegratedDetailTemplate";
import { orderSalesConfig } from "./orderSalesConfig";
import { BadgeSm } from "@/components/atoms/BadgeSm";
import { formatAmount } from "@/utils/formatAmount";
import {
  OrderItem,
  getOrderById,
  updateOrder,
  type OrderStatus,
} from "@/components/orders";

// 수정 폼 데이터
interface EditFormData {
  // 읽기전용 정보
  lotNumber: string;
  quoteNumber: string;
  client: string;
  siteName: string;
  manager: string;
  contact: string;
  status: OrderStatus;

  // 수정 가능 정보
  expectedShipDate: string;
  expectedShipDateUndecided: boolean;
  deliveryRequestDate: string;
  deliveryMethod: string;
  shippingCost: string;
  receiver: string;
  receiverContact: string;
  address: string;
  addressDetail: string;
  remarks: string;

  // 품목 (수정 제한)
  items: OrderItem[];
  canEditItems: boolean;
  subtotal: number;
  discountRate: number;
  totalAmount: number;
}

// 배송방식 옵션
const DELIVERY_METHODS = [
  { value: "direct", label: "직접배차" },
  { value: "pickup", label: "상차" },
  { value: "courier", label: "택배" },
];

// 운임비용 옵션
const SHIPPING_COSTS = [
  { value: "free", label: "무료" },
  { value: "prepaid", label: "선불" },
  { value: "collect", label: "착불" },
  { value: "negotiable", label: "협의" },
];


// 상태 뱃지 헬퍼
function getOrderStatusBadge(status: OrderStatus) {
  const statusConfig: Record<OrderStatus, { label: string; className: string }> = {
    order_registered: { label: "수주등록", className: "bg-gray-100 text-gray-700 border-gray-200" },
    order_confirmed: { label: "수주확정", className: "bg-gray-100 text-gray-700 border-gray-200" },
    production_ordered: { label: "생산지시완료", className: "bg-blue-100 text-blue-700 border-blue-200" },
    in_production: { label: "생산중", className: "bg-green-100 text-green-700 border-green-200" },
    rework: { label: "재작업중", className: "bg-orange-100 text-orange-700 border-orange-200" },
    work_completed: { label: "작업완료", className: "bg-blue-600 text-white border-blue-600" },
    shipped: { label: "출하완료", className: "bg-gray-500 text-white border-gray-500" },
    cancelled: { label: "취소", className: "bg-red-100 text-red-700 border-red-200" },
  };
  const config = statusConfig[status];
  return (
    <BadgeSm className={config.className}>
      {config.label}
    </BadgeSm>
  );
}

interface OrderSalesDetailEditProps {
  orderId: string;
}

export function OrderSalesDetailEdit({ orderId }: OrderSalesDetailEditProps) {
  const router = useRouter();

  const [form, setForm] = useState<EditFormData | null>(null);
  const [loading, setLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

  // 데이터 로드 (API)
  useEffect(() => {
    async function loadOrder() {
      try {
        setLoading(true);
        const result = await getOrderById(orderId);
        if (result.success && result.data) {
          const order = result.data;
          // 상태에 따라 품목 수정 가능 여부 결정
          const canEditItems = !["in_production", "rework", "work_completed", "shipped"].includes(
            order.status
          );
          // Order 데이터를 EditFormData로 변환
          setForm({
            lotNumber: order.lotNumber,
            quoteNumber: order.quoteNumber || "",
            client: order.client,
            siteName: order.siteName,
            manager: order.manager || "",
            contact: order.contact || "",
            status: order.status,
            expectedShipDate: order.expectedShipDate || "",
            expectedShipDateUndecided: !order.expectedShipDate,
            deliveryRequestDate: order.deliveryRequestDate || "",
            deliveryMethod: order.deliveryMethod || "",
            shippingCost: order.shippingCost || "",
            receiver: order.receiver || "",
            receiverContact: order.receiverContact || "",
            address: order.address || "",
            addressDetail: order.addressDetail || "",
            remarks: order.remarks || "",
            items: order.items || [],
            canEditItems,
            subtotal: order.subtotal || order.amount,
            discountRate: order.discountRate || 0,
            totalAmount: order.amount,
          });
        } else {
          toast.error(result.error || "수주 정보를 불러오는데 실패했습니다.");
          router.push("/sales/order-management-sales");
        }
      } catch (error) {
        console.error("Error loading order:", error);
        toast.error("수주 정보를 불러오는 중 오류가 발생했습니다.");
        router.push("/sales/order-management-sales");
      } finally {
        setLoading(false);
      }
    }
    loadOrder();
  }, [orderId, router]);

  const handleCancel = () => {
    // V2 패턴: ?mode=view로 이동 (기본값이므로 쿼리 없이 이동)
    router.push(`/sales/order-management-sales/${orderId}`);
  };

  // IntegratedDetailTemplate용 onSubmit 핸들러
  const handleSubmit = useCallback(async (): Promise<{ success: boolean; error?: string }> => {
    if (!form) return { success: false, error: "폼 데이터가 없습니다." };

    // 유효성 검사
    if (!form.deliveryRequestDate) {
      return { success: false, error: "납품요청일을 입력해주세요." };
    }
    if (!form.receiver.trim()) {
      return { success: false, error: "수신(반장/업체)을 입력해주세요." };
    }
    if (!form.receiverContact.trim()) {
      return { success: false, error: "수신처 연락처를 입력해주세요." };
    }

    try {
      // API 연동
      const result = await updateOrder(orderId, {
        clientId: undefined, // 기존 값 유지
        siteName: form.siteName,
        expectedShipDate: form.expectedShipDateUndecided ? undefined : form.expectedShipDate,
        deliveryRequestDate: form.deliveryRequestDate,
        deliveryMethod: form.deliveryMethod,
        shippingCost: form.shippingCost,
        receiver: form.receiver,
        receiverContact: form.receiverContact,
        address: form.address,
        addressDetail: form.addressDetail,
        remarks: form.remarks,
        items: form.items.map((item) => ({
          itemId: item.id ? parseInt(item.id, 10) : undefined,
          itemCode: item.itemCode,
          itemName: item.itemName,
          specification: item.spec,
          quantity: item.quantity,
          unit: item.unit,
          unitPrice: item.unitPrice,
        })),
      });

      if (result.success) {
        toast.success("수주가 수정되었습니다.");
        // V2 패턴: 저장 후 view 모드로 이동
        router.push(`/sales/order-management-sales/${orderId}`);
        return { success: true };
      } else {
        return { success: false, error: result.error || "수주 수정에 실패했습니다." };
      }
    } catch (error) {
      console.error("Error updating order:", error);
      return { success: false, error: "수주 수정 중 오류가 발생했습니다." };
    }
  }, [form, orderId, router]);

  // 동적 config (수정 모드용 타이틀)
  const dynamicConfig = useMemo(() => {
    return {
      ...orderSalesConfig,
      title: "수주 수정",
      actions: {
        ...orderSalesConfig.actions,
        showEdit: false, // 수정 모드에서는 수정 버튼 숨김
        showDelete: false,
      },
    };
  }, []);

  // 커스텀 헤더 액션 (상태 뱃지)
  const customHeaderActions = useMemo(() => {
    if (!form) return null;
    return (
      <div className="flex items-center gap-2">
        <code className="text-sm font-mono bg-gray-100 px-2 py-1 rounded">
          {form.lotNumber}
        </code>
        {getOrderStatusBadge(form.status)}
      </div>
    );
  }, [form]);

  // 폼 콘텐츠 렌더링
  const renderFormContent = useCallback(() => {
    if (!form) return null;

    return (
      <div className="space-y-6">
        {/* 기본 정보 (읽기전용) */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              기본 정보
              <span className="text-sm font-normal text-muted-foreground">(읽기전용)</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div className="space-y-1">
                <Label className="text-muted-foreground text-sm">로트번호</Label>
                <p className="font-medium">{form.lotNumber}</p>
              </div>
              <div className="space-y-1">
                <Label className="text-muted-foreground text-sm">견적번호</Label>
                <p className="font-medium">{form.quoteNumber}</p>
              </div>
              <div className="space-y-1">
                <Label className="text-muted-foreground text-sm">담당자</Label>
                <p className="font-medium">{form.manager}</p>
              </div>
              <div className="space-y-1">
                <Label className="text-muted-foreground text-sm">발주처</Label>
                <p className="font-medium">{form.client}</p>
              </div>
              <div className="space-y-1">
                <Label className="text-muted-foreground text-sm">현장명</Label>
                <p className="font-medium">{form.siteName}</p>
              </div>
              <div className="space-y-1">
                <Label className="text-muted-foreground text-sm">연락처</Label>
                <p className="font-medium">{form.contact}</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 수주/배송 정보 (편집 가능) */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">수주/배송 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {/* 출고예정일 */}
              <div className="space-y-2">
                <Label>출고예정일</Label>
                <div className="flex items-center gap-4">
                  <Input
                    type="date"
                    value={form.expectedShipDate}
                    onChange={(e) =>
                      setForm({ ...form, expectedShipDate: e.target.value })
                    }
                    disabled={form.expectedShipDateUndecided}
                    className="flex-1"
                  />
                  <div className="flex items-center gap-2">
                    <Checkbox
                      id="expectedShipDateUndecided"
                      checked={form.expectedShipDateUndecided}
                      onCheckedChange={(checked) =>
                        setForm({
                          ...form,
                          expectedShipDateUndecided: checked as boolean,
                          expectedShipDate: checked ? "" : form.expectedShipDate,
                        })
                      }
                    />
                    <Label
                      htmlFor="expectedShipDateUndecided"
                      className="text-sm font-normal"
                    >
                      미정
                    </Label>
                  </div>
                </div>
              </div>

              {/* 납품요청일 */}
              <div className="space-y-2">
                <Label>
                  납품요청일 <span className="text-red-500">*</span>
                </Label>
                <Input
                  type="date"
                  value={form.deliveryRequestDate}
                  onChange={(e) =>
                    setForm({ ...form, deliveryRequestDate: e.target.value })
                  }
                />
              </div>

              {/* 배송방식 */}
              <div className="space-y-2">
                <Label>배송방식</Label>
                <Select
                  key={`deliveryMethod-${form.deliveryMethod}`}
                  value={form.deliveryMethod}
                  onValueChange={(value) =>
                    setForm({ ...form, deliveryMethod: value })
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="배송방식 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {DELIVERY_METHODS.map((method) => (
                      <SelectItem key={method.value} value={method.value}>
                        {method.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* 운임비용 */}
              <div className="space-y-2">
                <Label>운임비용</Label>
                <Select
                  key={`shippingCost-${form.shippingCost}`}
                  value={form.shippingCost}
                  onValueChange={(value) =>
                    setForm({ ...form, shippingCost: value })
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="운임비용 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {SHIPPING_COSTS.map((cost) => (
                      <SelectItem key={cost.value} value={cost.value}>
                        {cost.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* 수신(반장/업체) */}
              <div className="space-y-2">
                <Label>
                  수신(반장/업체) <span className="text-red-500">*</span>
                </Label>
                <Input
                  value={form.receiver}
                  onChange={(e) =>
                    setForm({ ...form, receiver: e.target.value })
                  }
                />
              </div>

              {/* 수신처 연락처 */}
              <div className="space-y-2">
                <Label>
                  수신처 연락처 <span className="text-red-500">*</span>
                </Label>
                <PhoneInput
                  value={form.receiverContact}
                  onChange={(value) =>
                    setForm({ ...form, receiverContact: value })
                  }
                />
              </div>

              {/* 수신처 주소 */}
              <div className="space-y-2 md:col-span-2">
                <Label>수신처 주소</Label>
                <Input
                  value={form.address}
                  onChange={(e) =>
                    setForm({ ...form, address: e.target.value })
                  }
                  placeholder="주소"
                  className="mb-2"
                />
                <Input
                  value={form.addressDetail}
                  onChange={(e) =>
                    setForm({ ...form, addressDetail: e.target.value })
                  }
                  placeholder="상세주소"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 비고 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">비고</CardTitle>
          </CardHeader>
          <CardContent>
            <Textarea
              value={form.remarks}
              onChange={(e) => setForm({ ...form, remarks: e.target.value })}
              placeholder="특이사항을 입력하세요"
              rows={4}
            />
          </CardContent>
        </Card>

        {/* 품목 내역 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              품목 내역
              {!form.canEditItems && (
                <span className="flex items-center gap-1 text-sm font-normal text-orange-600">
                  <AlertTriangle className="h-4 w-4" />
                  생산 시작 후 수정 불가
                </span>
              )}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="border rounded-lg overflow-hidden">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[60px] text-center">No</TableHead>
                    <TableHead>품목코드</TableHead>
                    <TableHead>품명</TableHead>
                    <TableHead>종</TableHead>
                    <TableHead>부호</TableHead>
                    <TableHead>규격(mm)</TableHead>
                    <TableHead className="text-center">수량</TableHead>
                    <TableHead className="text-center">단위</TableHead>
                    <TableHead className="text-right">단가</TableHead>
                    <TableHead className="text-right">금액</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {form.items.map((item, index) => (
                    <TableRow key={item.id}>
                      <TableCell className="text-center">{index + 1}</TableCell>
                      <TableCell>
                        <code className="text-xs bg-gray-100 px-1.5 py-0.5 rounded">
                          {item.itemCode}
                        </code>
                      </TableCell>
                      <TableCell>{item.itemName}</TableCell>
                      <TableCell>{item.type || "-"}</TableCell>
                      <TableCell>{item.symbol || "-"}</TableCell>
                      <TableCell>{item.spec}</TableCell>
                      <TableCell className="text-center">{item.quantity}</TableCell>
                      <TableCell className="text-center">{item.unit}</TableCell>
                      <TableCell className="text-right">
                        {formatAmount(item.unitPrice)}원
                      </TableCell>
                      <TableCell className="text-right font-medium">
                        {formatAmount(item.amount)}원
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

            {/* 합계 */}
            <div className="flex flex-col items-end gap-2 pt-4 mt-4 border-t">
              <div className="flex items-center gap-4 text-sm">
                <span className="text-muted-foreground">소계:</span>
                <span className="w-32 text-right">
                  {formatAmount(form.subtotal)}원
                </span>
              </div>
              <div className="flex items-center gap-4 text-sm">
                <span className="text-muted-foreground">할인율:</span>
                <span className="w-32 text-right">{form.discountRate}%</span>
              </div>
              <div className="flex items-center gap-4 text-lg font-semibold">
                <span>총금액:</span>
                <span className="w-32 text-right text-green-600">
                  {formatAmount(form.totalAmount)}원
                </span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }, [form]);

  return (
    <IntegratedDetailTemplate
      config={dynamicConfig}
      mode="edit"
      initialData={form || {}}
      itemId={orderId}
      isLoading={loading}
      headerActions={customHeaderActions}
      onSubmit={handleSubmit}
      renderView={() => renderFormContent()}
      renderForm={() => renderFormContent()}
    />
  );
}