'use client';

import { useState, useCallback } from 'react';
import { useSearchParams } from 'next/navigation';
import { OrderCreate } from '@/frontend/route-params';
import type { CreateDeliveryOrderInput } from '@/frontend/actions/OrderCreate';
import { createDeliveryOrder } from '@/frontend/actions/OrderCreate';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';

// ===== 页面入参 =====
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const getParams = (sp: URLSearchParams) => {
  return OrderCreate.getParams(sp);
};
const initialFormState: CreateDeliveryOrderInput = {
  governorate_name: '',
  area_name: '',
  nearest_landmark: '',
  customer_name: '',
  customer_phone: '',
  driver_name: '',
  order_type: ''
};
type FormErrors = Partial<Record<keyof CreateDeliveryOrderInput, string>>;
export default function OrderCreatePage() {
  const searchParams = useSearchParams();
  // Ensure we call getParams as per rules, even if we don't use the result here
  getParams(searchParams);

  // ===== State =====
  const [formData, setFormData] = useState<CreateDeliveryOrderInput>(initialFormState);
  const [errors, setErrors] = useState<FormErrors>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
  const [submitMessage, setSubmitMessage] = useState<string>('');

  // ===== Handlers =====
  const handleFormFieldChange = useCallback(<K extends keyof CreateDeliveryOrderInput,>(field: K, value: CreateDeliveryOrderInput[K]) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
    // Clear the specific field error when user starts typing
    setErrors(prev => {
      if (prev[field]) {
        const newErrors = {
          ...prev
        };
        delete newErrors[field];
        return newErrors;
      }
      return prev;
    });
  }, []);
  const validateForm = (): boolean => {
    const newErrors: FormErrors = {};
    if (!formData.governorate_name.trim()) newErrors.governorate_name = 'مطلوب إدخال اسم المحافظة';
    if (!formData.area_name.trim()) newErrors.area_name = 'مطلوب إدخال المنطقة';
    if (!formData.nearest_landmark.trim()) newErrors.nearest_landmark = 'مطلوب إدخال أقرب نقطة دالة';
    if (!formData.customer_name.trim()) newErrors.customer_name = 'مطلوب إدخال اسم الزبون';
    if (!formData.customer_phone.trim()) {
      newErrors.customer_phone = 'مطلوب إدخال رقم الزبون';
    } else {
      const cleanedPhone = formData.customer_phone.replace(/[\s\-\(\)\+]/g, '');
      const phoneRegex = /^[0-9]+$/;
      if (!phoneRegex.test(cleanedPhone)) {
        newErrors.customer_phone = 'يرجى إدخال أرقام فقط';
      }
    }
    if (!formData.driver_name.trim()) newErrors.driver_name = 'مطلوب إدخال اسم السائق';
    if (!formData.order_type.trim()) newErrors.order_type = 'مطلوب إدخال نوع الطلب';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    // Reset previous system feedback
    setSubmitStatus('idle');
    setSubmitMessage('');
    if (!validateForm()) {
      return;
    }
    setIsSubmitting(true);
    try {
      const result = await createDeliveryOrder(formData);
      setSubmitStatus('success');
      setSubmitMessage(`تم حفظ الطلب بنجاح. رقم الطلب: ${result.order_no}`);
      setFormData(initialFormState);
    } catch (error: unknown) {
      setSubmitStatus('error');
      if (error instanceof Error) {
        setSubmitMessage(error.message);
      } else {
        setSubmitMessage('حدث خطأ غير متوقع في النظام');
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  // ===== Render =====
  return <main data-api-unique-id='ordercreateview-skeleton-with-logic-r82feb243e655c446-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
      <article data-api-unique-id='ordercreateview-skeleton-with-logic-r5ad4b514f1d23bba-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
        
        {/* 1. قسم الترحيب والتعريف (Hero Section) */}
        <header data-api-unique-id='ordercreateview-skeleton-with-logic-r09989d380cf26290-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
          <div data-api-unique-id='ordercreateview-skeleton-with-logic-r7c3891bfc5b0a4e6-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
            <img src="/placeholder-logo.png" alt="شعار مشوار" data-api-unique-id='ordercreateview-skeleton-with-logic-rb9379d9aab3301ba-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic' />
          </div>
          <h1 data-api-unique-id='ordercreateview-skeleton-with-logic-r07ea28492c21c432-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>بوابة تسجيل طلبات التوصيل</h1>
          <p data-api-unique-id='ordercreateview-skeleton-with-logic-r48ad0bfbdfe351b3-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>واجهة مخصصة لإدخال الطلبات الجديدة وتوجيهها مباشرة إلى مركز العمليات بأمان وسرعة.</p>
        </header>

        {/* 2. نموذج بيانات الطلب (Order Input Form) */}
        <form onSubmit={handleSubmit} data-api-unique-id='ordercreateview-skeleton-with-logic-rb51c3969b629d54b-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
          
          {/* الصف الأول (الموقع العام) */}
          <div data-api-unique-id='ordercreateview-skeleton-with-logic-rc0338d7aef4f9a34-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
            <div data-api-unique-id='ordercreateview-skeleton-with-logic-r7a17d6cef9d472ea-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
              <Label htmlFor="governorate_name" data-api-unique-id='ordercreateview-skeleton-with-logic-r383ebca37fecbd08-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>اسم المحافظة</Label>
              <Input id="governorate_name" value={formData.governorate_name} onChange={e => handleFormFieldChange('governorate_name', e.target.value)} disabled={isSubmitting} placeholder="أدخل اسم المحافظة" data-api-unique-id='ordercreateview-skeleton-with-logic-re85e40dd5d99cd39-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic' />
              {errors.governorate_name && <span role="alert" data-api-unique-id='ordercreateview-skeleton-with-logic-r9b3a99f74d9b6a0f-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>{errors.governorate_name}</span>}
            </div>
            
            <div data-api-unique-id='ordercreateview-skeleton-with-logic-reef822f3c9020a2d-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
              <Label htmlFor="area_name" data-api-unique-id='ordercreateview-skeleton-with-logic-rfaa267b59267341f-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>المنطقة</Label>
              <Input id="area_name" value={formData.area_name} onChange={e => handleFormFieldChange('area_name', e.target.value)} disabled={isSubmitting} placeholder="أدخل اسم المنطقة" data-api-unique-id='ordercreateview-skeleton-with-logic-ra266c0e597cf7cc3-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic' />
              {errors.area_name && <span role="alert" data-api-unique-id='ordercreateview-skeleton-with-logic-rd4a4444426a4c206-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>{errors.area_name}</span>}
            </div>
          </div>

          {/* الصف الثاني (الموقع التفصيلي) */}
          <div data-api-unique-id='ordercreateview-skeleton-with-logic-re5de599697eaf923-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
            <div data-api-unique-id='ordercreateview-skeleton-with-logic-r9acdb13af3598416-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
              <Label htmlFor="nearest_landmark" data-api-unique-id='ordercreateview-skeleton-with-logic-r92b7a66d67ec838c-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>أقرب نقطة دالة</Label>
              <Input id="nearest_landmark" value={formData.nearest_landmark} onChange={e => handleFormFieldChange('nearest_landmark', e.target.value)} disabled={isSubmitting} placeholder="صف أقرب معلم بارز لتسهيل التوصيل" data-api-unique-id='ordercreateview-skeleton-with-logic-rc8d3a5a655a271f5-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic' />
              {errors.nearest_landmark && <span role="alert" data-api-unique-id='ordercreateview-skeleton-with-logic-r370f10475954c0c7-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>{errors.nearest_landmark}</span>}
            </div>
          </div>

          {/* الصف الثالث (بيانات الزبون) */}
          <div data-api-unique-id='ordercreateview-skeleton-with-logic-rec95a2678f5ddf21-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
            <div data-api-unique-id='ordercreateview-skeleton-with-logic-r9b0a0d5b5b35ecf5-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
              <Label htmlFor="customer_name" data-api-unique-id='ordercreateview-skeleton-with-logic-r35951dbb21fbcf36-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>اسم الزبون</Label>
              <Input id="customer_name" value={formData.customer_name} onChange={e => handleFormFieldChange('customer_name', e.target.value)} disabled={isSubmitting} placeholder="الاسم الكامل للزبون" data-api-unique-id='ordercreateview-skeleton-with-logic-rba18986f256ae845-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic' />
              {errors.customer_name && <span role="alert" data-api-unique-id='ordercreateview-skeleton-with-logic-r77f3e3a46a3b40a4-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>{errors.customer_name}</span>}
            </div>
            
            <div data-api-unique-id='ordercreateview-skeleton-with-logic-rbae898ad21b16786-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
              <Label htmlFor="customer_phone" data-api-unique-id='ordercreateview-skeleton-with-logic-r895886de2c39f259-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>رقم الزبون</Label>
              <Input id="customer_phone" type="tel" value={formData.customer_phone} onChange={e => handleFormFieldChange('customer_phone', e.target.value)} disabled={isSubmitting} placeholder="مثال: 078xxxxxxx" data-api-unique-id='ordercreateview-skeleton-with-logic-rd0964ca08860fd43-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic' />
              {errors.customer_phone && <span role="alert" data-api-unique-id='ordercreateview-skeleton-with-logic-rcac2d57dddf1f2c0-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>{errors.customer_phone}</span>}
            </div>
          </div>

          {/* الصف الرابع (تفاصيل التوصيل) */}
          <div data-api-unique-id='ordercreateview-skeleton-with-logic-rcab500f0c94335a0-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
            <div data-api-unique-id='ordercreateview-skeleton-with-logic-rfc5be06f75ed6c07-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
              <Label htmlFor="driver_name" data-api-unique-id='ordercreateview-skeleton-with-logic-r868d88b88dc370a7-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>اسم السائق</Label>
              <Input id="driver_name" value={formData.driver_name} onChange={e => handleFormFieldChange('driver_name', e.target.value)} disabled={isSubmitting} placeholder="اسم سائق التوصيل" data-api-unique-id='ordercreateview-skeleton-with-logic-r54f7015fec68b54a-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic' />
              {errors.driver_name && <span role="alert" data-api-unique-id='ordercreateview-skeleton-with-logic-re754cc7579ab95f1-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>{errors.driver_name}</span>}
            </div>
            
            <div data-api-unique-id='ordercreateview-skeleton-with-logic-r35ce06dbc2c8ac34-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
              <Label htmlFor="order_type" data-api-unique-id='ordercreateview-skeleton-with-logic-r913d50543b6d2ac9-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>نوع الطلب</Label>
              <Input id="order_type" value={formData.order_type} onChange={e => handleFormFieldChange('order_type', e.target.value)} disabled={isSubmitting} placeholder="مثال: طعام، طرد، وثائق..." data-api-unique-id='ordercreateview-skeleton-with-logic-r646684dca73aea61-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic' />
              {errors.order_type && <span role="alert" data-api-unique-id='ordercreateview-skeleton-with-logic-rf0b5dc6ad89c8820-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>{errors.order_type}</span>}
            </div>
          </div>

          {/* 3. منطقة الإرشادات وحالة النظام (Status & Guidelines Area) */}
          <aside data-api-unique-id='ordercreateview-skeleton-with-logic-r709d03020bf5ade1-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
            <p data-api-unique-id='ordercreateview-skeleton-with-logic-r18e515781ee7c3a9-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>جميع الحقول تدعم الإدخال باللغة العربية. يرجى إدخال رقم الزبون بالصيغة المحلية.</p>
          </aside>

          {/* حاوية رسائل النظام (System Feedback Panel) */}
          {submitStatus !== 'idle' && <Alert variant={submitStatus === 'error' ? 'destructive' : 'default'} data-api-unique-id='ordercreateview-skeleton-with-logic-r68de5ccf73d2013c-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
              <AlertTitle data-api-unique-id='ordercreateview-skeleton-with-logic-r4aaf35227059be84-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
                {submitStatus === 'success' ? 'نجاح' : 'خطأ في النظام'}
              </AlertTitle>
              <AlertDescription data-api-unique-id='ordercreateview-skeleton-with-logic-r87991658f3e2d213-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
                {submitMessage}
              </AlertDescription>
            </Alert>}

          {/* 4. قسم الإجراء الرئيسي (Call to Action) */}
          <div data-api-unique-id='ordercreateview-skeleton-with-logic-r28218d74bc19c620-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
            <Button type="submit" disabled={isSubmitting} data-api-unique-id='ordercreateview-skeleton-with-logic-rdb2def477517c8cf-s2516128725' data-api-unique-page-name='src/frontend/components/OrderCreateView_skeleton_with_logic'>
              إضافة الطلب
            </Button>
          </div>

        </form>
      </article>
    </main>;
}