"use client";

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

import { useState, useEffect } from "react";
import { useRouter, useParams } from "next/navigation";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
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 { FileText, ArrowLeft, Info, AlertTriangle } from "lucide-react";
import { toast } from "sonner";
import { PageLayout } from "@/components/organisms/PageLayout";
import { PageHeader } from "@/components/organisms/PageHeader";
import { FormSection } from "@/components/templates/ResponsiveFormTemplate";
import { FormActions } from "@/components/organisms/FormActions";
import { BadgeSm } from "@/components/atoms/BadgeSm";
import { formatAmount } from "@/utils/formatAmount";
import { OrderItem } from "@/components/orders";

// 수주 상태 타입
type OrderStatus =
  | "order_registered"
  | "order_confirmed"
  | "production_ordered"
  | "in_production"
  | "rework"
  | "work_completed"
  | "shipped"
  | "cancelled";

// 수정 폼 데이터
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: "협의" },
];

// 샘플 데이터
const SAMPLE_ORDER: EditFormData = {
  lotNumber: "KD-TS-251217-01",
  quoteNumber: "KD-PR-251210-01",
  client: "태영건설(주)",
  siteName: "데시앙 동탄 파크뷰",
  manager: "김철수",
  contact: "010-1234-5678",
  status: "order_confirmed",
  expectedShipDate: "2025-01-15",
  expectedShipDateUndecided: false,
  deliveryRequestDate: "2025-01-20",
  deliveryMethod: "direct",
  shippingCost: "free",
  receiver: "박반장",
  receiverContact: "010-9876-5432",
  address: "경기도 화성시 동탄대로 123-45",
  addressDetail: "데시앙 동탄 파크뷰 현장",
  remarks: "4층 우선 납품 요청",
  items: [
    {
      id: "1",
      itemCode: "PRD-001",
      itemName: "국민방화스크린세터",
      type: "B1",
      symbol: "FSS1",
      spec: "7260×2600",
      width: 7260,
      height: 2600,
      quantity: 2,
      unit: "EA",
      unitPrice: 8000000,
      amount: 16000000,
    },
    {
      id: "2",
      itemCode: "PRD-002",
      itemName: "국민방화스크린세터",
      type: "B1",
      symbol: "FSS2",
      spec: "5000×2400",
      width: 5000,
      height: 2400,
      quantity: 3,
      unit: "EA",
      unitPrice: 7600000,
      amount: 22800000,
    },
  ],
  canEditItems: true,
  subtotal: 38800000,
  discountRate: 0,
  totalAmount: 38800000,
};

// 상태 뱃지 헬퍼
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>
  );
}

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);
  const [isSaving, setIsSaving] = useState(false);

  // 데이터 로드
  useEffect(() => {
    setTimeout(() => {
      // 상태에 따라 품목 수정 가능 여부 결정
      const canEditItems = !["in_production", "rework", "work_completed", "shipped"].includes(
        SAMPLE_ORDER.status
      );
      setForm({ ...SAMPLE_ORDER, canEditItems });
      setLoading(false);
    }, 300);
  }, [orderId]);

  const handleBack = () => {
    router.push(`/sales/order-management-sales/${orderId}`);
  };

  const handleCancel = () => {
    router.push(`/sales/order-management-sales/${orderId}`);
  };

  const handleSave = async () => {
    if (!form) return;

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

    setIsSaving(true);
    try {
      // TODO: API 연동
      console.log("수주 수정 데이터:", form);
      await new Promise((resolve) => setTimeout(resolve, 500));
      toast.success("수주가 수정되었습니다.");
      router.push(`/sales/order-management-sales/${orderId}`);
    } finally {
      setIsSaving(false);
    }
  };

  if (loading || !form) {
    return (
      <PageLayout>
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
        </div>
      </PageLayout>
    );
  }

  return (
    <PageLayout>
      {/* 헤더 */}
      <PageHeader
        title="수주 수정"
        icon={FileText}
        actions={
          <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>
        }
      />

      <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
                  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>
                <Input
                  value={form.receiverContact}
                  onChange={(e) =>
                    setForm({ ...form, receiverContact: e.target.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>

      {/* 하단 버튼 */}
      <div className="sticky bottom-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t pt-4 pb-4 -mx-3 md:-mx-6 px-3 md:px-6 mt-6">
        <FormActions
          onSave={handleSave}
          onCancel={handleCancel}
          saveLabel="저장"
          cancelLabel="취소"
          saveLoading={isSaving}
          saveDisabled={isSaving}
        />
      </div>
    </PageLayout>
  );
}