'use client';

import { useState, useEffect, useCallback } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { toast } from "sonner";
import { OrderEdit, OrderDetail, OrderManagement } from '@/backend/route-params';
import { getOrderForEdit, updateOrder } from '@/backend/actions/OrderEdit';
import type { DeliveryOrderStatus, OrderEditDetail } from '@/backend/actions/OrderEdit';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';

// ===== 枚举映射 =====
const STATUS_LABELS: Record<DeliveryOrderStatus, string> = {
  PENDING: 'قيد الانتظار',
  IN_PROGRESS: 'قيد التوصيل',
  DELIVERED: 'تم التوصيل',
  CANCELLED: 'ملغي'
};

// ===== 类型定义 =====
interface FormFields {
  customer_name: string;
  customer_phone: string;
  governorate_name: string;
  area_name: string;
  nearest_landmark: string;
  driver_name: string;
  order_type: string;
}
export default function OrderEditPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const {
    id
  } = OrderEdit.getParams(searchParams);

  // ===== State =====
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [orderHeader, setOrderHeader] = useState<OrderEditDetail | null>(null);
  const [formData, setFormData] = useState<FormFields>({
    customer_name: '',
    customer_phone: '',
    governorate_name: '',
    area_name: '',
    nearest_landmark: '',
    driver_name: '',
    order_type: ''
  });

  // ===== Effects =====
  useEffect(() => {
    if (!id) {
      OrderManagement.navigateToDefault(router);
      return;
    }
    let isMounted = true;
    const fetchOrderData = async () => {
      try {
        setIsLoading(true);
        const {
          order
        } = await getOrderForEdit({
          order_id: id
        });
        if (!isMounted) return;
        if (order) {
          setOrderHeader(order);
          setFormData({
            customer_name: order.customer_name,
            customer_phone: order.customer_phone,
            governorate_name: order.governorate_name,
            area_name: order.area_name,
            nearest_landmark: order.nearest_landmark,
            driver_name: order.driver_name,
            order_type: order.order_type
          });
        }
      } catch (error) {
        if (error instanceof Error) {
          toast.error(error.message);
        }
      } finally {
        if (isMounted) {
          setIsLoading(false);
        }
      }
    };
    fetchOrderData();
    return () => {
      isMounted = false;
    };
  }, [id, router]);

  // ===== Handlers =====
  const handleFormChange = useCallback(<K extends keyof FormFields,>(field: K, value: FormFields[K]) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  }, []);
  const handleSave = async () => {
    // Basic frontend validation to avoid unnecessary RPC calls
    if (!formData.customer_name.trim() || !formData.customer_phone.trim() || !formData.governorate_name.trim() || !formData.area_name.trim() || !formData.nearest_landmark.trim() || !formData.driver_name.trim() || !formData.order_type.trim()) {
      toast.error('يرجى تعبئة جميع الحقول المطلوبة');
      return;
    }
    if (!/^\d+$/.test(formData.customer_phone.trim())) {
      toast.error('يجب أن يحتوي رقم الهاتف على أرقام فقط');
      return;
    }
    try {
      setIsSaving(true);
      await updateOrder({
        order_id: id,
        ...formData
      });
      toast.success('تم تعديل الطلب بنجاح');
      OrderDetail.navigateToDetail(router, {
        orderId: id
      });
    } catch (error) {
      if (error instanceof Error) {
        toast.error(error.message);
      }
    } finally {
      setIsSaving(false);
    }
  };
  const handleCancel = useCallback(() => {
    if (id) {
      OrderDetail.navigateToDetail(router, {
        orderId: id
      });
    } else {
      OrderManagement.navigateToDefault(router);
    }
  }, [id, router]);

  // ===== Render =====

  if (!id) {
    return null; // Will redirect in effect
  }
  if (isLoading) {
    return <div data-api-unique-id='ordereditview-skeleton-with-logic-rc5912d058aff3319-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
        <Card data-api-unique-id='ordereditview-skeleton-with-logic-re1e202f0b6cea3f7-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
          <CardHeader data-api-unique-id='ordereditview-skeleton-with-logic-raaa5da2c27a935e7-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
            <Skeleton data-api-unique-id='ordereditview-skeleton-with-logic-r7e99f6e0f0746ff7-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            <Skeleton data-api-unique-id='ordereditview-skeleton-with-logic-rdf3f15024fb3e899-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
          </CardHeader>
          <CardContent data-api-unique-id='ordereditview-skeleton-with-logic-re47c8c7472ee0131-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
            <div data-api-unique-id='ordereditview-skeleton-with-logic-r78bd97d2185fc026-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
              <Skeleton data-api-unique-id='ordereditview-skeleton-with-logic-r65480f96efa43fdd-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
              <Skeleton data-api-unique-id='ordereditview-skeleton-with-logic-r03fdd0f8df350d61-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
              <Skeleton data-api-unique-id='ordereditview-skeleton-with-logic-r8764783d78f61867-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
              <Skeleton data-api-unique-id='ordereditview-skeleton-with-logic-r9ac6c36783542aec-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            </div>
          </CardContent>
        </Card>
      </div>;
  }
  if (!orderHeader) {
    return <div data-api-unique-id='ordereditview-skeleton-with-logic-r43b74f3c21ceb6ee-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
        <Card data-api-unique-id='ordereditview-skeleton-with-logic-r107c23c71bd1d5c4-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
          <CardContent data-api-unique-id='ordereditview-skeleton-with-logic-re9ccbca3862f1914-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
            <p data-api-unique-id='ordereditview-skeleton-with-logic-r7a4004887611fbab-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>الطلب غير موجود أو تم حذفه</p>
            <Button onClick={handleCancel} data-api-unique-id='ordereditview-skeleton-with-logic-rb843452f54c3994e-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>العودة لإدارة الطلبات</Button>
          </CardContent>
        </Card>
      </div>;
  }
  return <div data-api-unique-id='ordereditview-skeleton-with-logic-r880cc7c506980065-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
      <Card data-api-unique-id='ordereditview-skeleton-with-logic-r8882e5722fe12b90-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
        <CardHeader data-api-unique-id='ordereditview-skeleton-with-logic-r91e7a9de4d2f4597-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
          <CardTitle data-api-unique-id='ordereditview-skeleton-with-logic-r5ee261e76e55af26-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>تعديل تفاصيل الطلب</CardTitle>
          <CardDescription data-api-unique-id='ordereditview-skeleton-with-logic-rb1f1264f40ad4f3b-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
            <span data-api-unique-id='ordereditview-skeleton-with-logic-r4cd0620d0efaa39b-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>رقم الطلب: {orderHeader.order_no}</span>
            <br data-api-unique-id='ordereditview-skeleton-with-logic-rfe1f8c43f7cd4f6a-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            <span data-api-unique-id='ordereditview-skeleton-with-logic-r45c284719a887808-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>الحالة الحالية: {STATUS_LABELS[orderHeader.order_status]}</span>
          </CardDescription>
        </CardHeader>

        <CardContent data-api-unique-id='ordereditview-skeleton-with-logic-ra81b0b7caf3d745e-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
          <form onSubmit={e => e.preventDefault()} data-api-unique-id='ordereditview-skeleton-with-logic-re7977201a1ffc408-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
            <div data-api-unique-id='ordereditview-skeleton-with-logic-rd0bd43c6b7f6ead5-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
              <Label htmlFor="customer_name" data-api-unique-id='ordereditview-skeleton-with-logic-rfa0a759a2c30d17e-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>اسم الزبون</Label>
              <Input id="customer_name" value={formData.customer_name} onChange={e => handleFormChange('customer_name', e.target.value)} disabled={isSaving} data-api-unique-id='ordereditview-skeleton-with-logic-r04bb4067c7d8d15f-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            </div>

            <div data-api-unique-id='ordereditview-skeleton-with-logic-rec770d167f854c0f-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
              <Label htmlFor="customer_phone" data-api-unique-id='ordereditview-skeleton-with-logic-r93b77e06539e48ca-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>رقم الزبون</Label>
              <Input id="customer_phone" value={formData.customer_phone} onChange={e => handleFormChange('customer_phone', e.target.value)} disabled={isSaving} data-api-unique-id='ordereditview-skeleton-with-logic-rf008c8b08fe67b9b-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            </div>

            <div data-api-unique-id='ordereditview-skeleton-with-logic-r5378d693e64f6b1a-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
              <Label htmlFor="governorate_name" data-api-unique-id='ordereditview-skeleton-with-logic-ra8f132ebe82a7aee-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>اسم المحافظة</Label>
              <Input id="governorate_name" value={formData.governorate_name} onChange={e => handleFormChange('governorate_name', e.target.value)} disabled={isSaving} data-api-unique-id='ordereditview-skeleton-with-logic-r9b827250d30e4832-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            </div>

            <div data-api-unique-id='ordereditview-skeleton-with-logic-r3b875e00ba9941da-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
              <Label htmlFor="area_name" data-api-unique-id='ordereditview-skeleton-with-logic-r2044e47b23b45c6c-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>المنطقة</Label>
              <Input id="area_name" value={formData.area_name} onChange={e => handleFormChange('area_name', e.target.value)} disabled={isSaving} data-api-unique-id='ordereditview-skeleton-with-logic-r1051cdabedf9b633-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            </div>

            <div data-api-unique-id='ordereditview-skeleton-with-logic-rf6fa98f1eafc165a-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
              <Label htmlFor="nearest_landmark" data-api-unique-id='ordereditview-skeleton-with-logic-r469e7a01219fcc2e-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>أقرب نقطة دالة</Label>
              <Input id="nearest_landmark" value={formData.nearest_landmark} onChange={e => handleFormChange('nearest_landmark', e.target.value)} disabled={isSaving} data-api-unique-id='ordereditview-skeleton-with-logic-r994dd262aa11624b-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            </div>

            <div data-api-unique-id='ordereditview-skeleton-with-logic-r90350d9910785e5a-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
              <Label htmlFor="driver_name" data-api-unique-id='ordereditview-skeleton-with-logic-r7089a626a834975a-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>اسم السائق</Label>
              <Input id="driver_name" value={formData.driver_name} onChange={e => handleFormChange('driver_name', e.target.value)} disabled={isSaving} data-api-unique-id='ordereditview-skeleton-with-logic-rd77a47d7922354cb-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            </div>

            <div data-api-unique-id='ordereditview-skeleton-with-logic-r4d7ffa98850f04ea-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
              <Label htmlFor="order_type" data-api-unique-id='ordereditview-skeleton-with-logic-r98f1247233886e44-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>نوع الطلب</Label>
              <Input id="order_type" value={formData.order_type} onChange={e => handleFormChange('order_type', e.target.value)} disabled={isSaving} data-api-unique-id='ordereditview-skeleton-with-logic-r36455aa157b99b3f-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic' />
            </div>
          </form>
        </CardContent>

        <CardFooter data-api-unique-id='ordereditview-skeleton-with-logic-r6847b0c02637f90a-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
          <Button variant="outline" onClick={handleCancel} disabled={isSaving} data-api-unique-id='ordereditview-skeleton-with-logic-r8c531a5f238e6e7a-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
            إلغاء
          </Button>
          <Button onClick={handleSave} disabled={isSaving} data-api-unique-id='ordereditview-skeleton-with-logic-r49a59bb92d4737d6-s3039180848' data-api-unique-page-name='src/backend/components/OrderEditView_skeleton_with_logic'>
            حفظ التعديلات
          </Button>
        </CardFooter>
      </Card>
    </div>;
}