"use client";

/**
 * 수주 수정 페이지
 *
 * - 기본 정보 (읽기전용)
 * - 수주/배송 정보 (편집 가능)
 * - 비고 (편집 가능)
 * - 품목 내역 (생산 시작 후 수정 불가)
 */

import { useState, useEffect, useCallback } from "react";
import { useRouter, useParams } from "next/navigation";
import { Input } from "@/components/ui/input";
import { DatePicker } from "@/components/ui/date-picker";
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 "@/components/orders/orderSalesConfig";
import { BadgeSm } from "@/components/atoms/BadgeSm";
import { formatAmount, formatNumber } from "@/lib/utils/amount";
import {
  OrderItem,
  getOrderById,
  updateOrder,
  type OrderStatus,
} from "@/components/orders";

/**
 * 수량 포맷 함수
 * - EA, SET, PCS 등 개수 단위: 정수로 표시
 * - M, M2, KG, L 등 측정 단위: 소수점 이하 불필요한 0 제거
 */
function formatQuantity(quantity: number, unit?: string): string {
  const countableUnits = ["EA", "SET", "PCS", "개", "세트", "BOX", "ROLL"];
  const upperUnit = (unit || "").toUpperCase();

  if (countableUnits.includes(upperUnit)) {
    // 개수 단위는 정수로 반올림
    return formatNumber(Math.round(quantity));
  }

  // 측정 단위는 소수점 4자리까지 반올림 후 불필요한 0 제거
  const rounded = Math.round(quantity * 10000) / 10000;
  return rounded.toLocaleString(undefined, {
    minimumFractionDigits: 0,
    maximumFractionDigits: 4
  });
}

// 수정 폼 데이터
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" },
    produced: { label: "생산완료", className: "bg-blue-100 text-blue-700 border-blue-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" },
    shipping: { label: "출하중", className: "bg-purple-100 text-purple-700 border-purple-200" },
    shipped: { label: "출하완료", className: "bg-gray-500 text-white border-gray-500" },
    completed: { 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] || { label: status, className: "bg-gray-100 text-gray-700 border-gray-200" };
  return (
    <BadgeSm className={config.className}>
      {config.label}
    </BadgeSm>
  );
}

export default function OrderEditPage() {
  const router = useRouter();
  const params = useParams();
  const orderId = params.id as string;

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

  // 데이터 로드 (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 = () => {
    router.push(`/sales/order-management-sales/${orderId}?mode=view`);
  };

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

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

    try {
      const result = await updateOrder(orderId, {
        clientName: form.client,
        clientContact: form.contact,
        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("수주가 수정되었습니다.");
        router.push(`/sales/order-management-sales/${orderId}?mode=view`);
        return { success: true };
      } else {
        toast.error(result.error || "수주 수정에 실패했습니다.");
        return { success: false, error: result.error };
      }
    } catch (error) {
      console.error("Error updating order:", error);
      toast.error("수주 수정 중 오류가 발생했습니다.");
      return { success: false, error: "수주 수정 중 오류가 발생했습니다." };
    }
  }, [form, orderId, router]);

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

    return (
      <div className="space-y-6">
        {/* 상태 뱃지 */}
        <div className="flex items-center gap-2 flex-wrap">
          <code className="text-sm font-mono bg-gray-100 px-2 py-1 rounded whitespace-nowrap">
            {form.lotNumber}
          </code>
          {getOrderStatusBadge(form.status)}
        </div>

        {/* 기본 정보 (읽기전용) */}
        <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-1 md:grid-cols-2 lg: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 truncate">{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">
                  <DatePicker
                    value={form.expectedShipDate}
                    onChange={(date) =>
                      setForm({ ...form, expectedShipDate: date })
                    }
                    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>
                <DatePicker
                  value={form.deliveryRequestDate}
                  onChange={(date) =>
                    setForm({ ...form, deliveryRequestDate: date })
                  }
                />
              </div>

              {/* 배송방식 */}
              <div className="space-y-2">
                <Label>배송방식</Label>
                <Select
                  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
                  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">{formatQuantity(item.quantity, item.unit)}</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 ?? 0)}
                      </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]);

  // Edit mode config override
  const editConfig = {
    ...orderSalesConfig,
    title: '수주',
  };

  return (
    <IntegratedDetailTemplate
      config={editConfig}
      mode="edit"
      initialData={(form ?? undefined) as Record<string, unknown> | undefined}
      itemId={orderId}
      isLoading={loading || !form}
      onSubmit={handleSubmit}
      onCancel={handleCancel}
      renderForm={renderFormContent}
    />
  );
}