'use client'

import React from 'react';
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';
import type { OrderCreateState, OrderCreateHandlers } from '@/frontend/hooks/useOrderCreate';

interface Props {
  state: OrderCreateState;
  handlers: OrderCreateHandlers;
}

export const OrderCreateView = ({ state, handlers }: Props) => {
  const { formData, errors, isSubmitting, submitStatus, submitMessage } = state;
  const { handleFormFieldChange, handleSubmit } = handlers;

  return (
    <main>
      <article>
        
        {/* 1. قسم الترحيب والتعريف (Hero Section) */}
        <header>
          <div>
            <img src="/placeholder-logo.png" alt="شعار مشوار" />
          </div>
          <h1>بوابة تسجيل طلبات التوصيل</h1>
          <p>واجهة مخصصة لإدخال الطلبات الجديدة وتوجيهها مباشرة إلى مركز العمليات بأمان وسرعة.</p>
        </header>

        {/* 2. نموذج بيانات الطلب (Order Input Form) */}
        <form onSubmit={handleSubmit}>
          
          {/* الصف الأول (الموقع العام) */}
          <div>
            <div>
              <Label htmlFor="governorate_name">اسم المحافظة</Label>
              <Input 
                id="governorate_name"
                value={formData.governorate_name}
                onChange={(e) => handleFormFieldChange('governorate_name', e.target.value)}
                disabled={isSubmitting}
                placeholder="أدخل اسم المحافظة"
              />
              {errors.governorate_name && (
                <span role="alert">{errors.governorate_name}</span>
              )}
            </div>
            
            <div>
              <Label htmlFor="area_name">المنطقة</Label>
              <Input 
                id="area_name"
                value={formData.area_name}
                onChange={(e) => handleFormFieldChange('area_name', e.target.value)}
                disabled={isSubmitting}
                placeholder="أدخل اسم المنطقة"
              />
              {errors.area_name && (
                <span role="alert">{errors.area_name}</span>
              )}
            </div>
          </div>

          {/* الصف الثاني (الموقع التفصيلي) */}
          <div>
            <div>
              <Label htmlFor="nearest_landmark">أقرب نقطة دالة</Label>
              <Input 
                id="nearest_landmark"
                value={formData.nearest_landmark}
                onChange={(e) => handleFormFieldChange('nearest_landmark', e.target.value)}
                disabled={isSubmitting}
                placeholder="صف أقرب معلم بارز لتسهيل التوصيل"
              />
              {errors.nearest_landmark && (
                <span role="alert">{errors.nearest_landmark}</span>
              )}
            </div>
          </div>

          {/* الصف الثالث (بيانات الزبون) */}
          <div>
            <div>
              <Label htmlFor="customer_name">اسم الزبون</Label>
              <Input 
                id="customer_name"
                value={formData.customer_name}
                onChange={(e) => handleFormFieldChange('customer_name', e.target.value)}
                disabled={isSubmitting}
                placeholder="الاسم الكامل للزبون"
              />
              {errors.customer_name && (
                <span role="alert">{errors.customer_name}</span>
              )}
            </div>
            
            <div>
              <Label htmlFor="customer_phone">رقم الزبون</Label>
              <Input 
                id="customer_phone"
                type="tel"
                value={formData.customer_phone}
                onChange={(e) => handleFormFieldChange('customer_phone', e.target.value)}
                disabled={isSubmitting}
                placeholder="مثال: 078xxxxxxx"
              />
              {errors.customer_phone && (
                <span role="alert">{errors.customer_phone}</span>
              )}
            </div>
          </div>

          {/* الصف الرابع (تفاصيل التوصيل) */}
          <div>
            <div>
              <Label htmlFor="driver_name">اسم السائق</Label>
              <Input 
                id="driver_name"
                value={formData.driver_name}
                onChange={(e) => handleFormFieldChange('driver_name', e.target.value)}
                disabled={isSubmitting}
                placeholder="اسم سائق التوصيل"
              />
              {errors.driver_name && (
                <span role="alert">{errors.driver_name}</span>
              )}
            </div>
            
            <div>
              <Label htmlFor="order_type">نوع الطلب</Label>
              <Input 
                id="order_type"
                value={formData.order_type}
                onChange={(e) => handleFormFieldChange('order_type', e.target.value)}
                disabled={isSubmitting}
                placeholder="مثال: طعام، طرد، وثائق..."
              />
              {errors.order_type && (
                <span role="alert">{errors.order_type}</span>
              )}
            </div>
          </div>

          {/* 3. منطقة الإرشادات وحالة النظام (Status & Guidelines Area) */}
          <aside>
            <p>جميع الحقول تدعم الإدخال باللغة العربية. يرجى إدخال رقم الزبون بالصيغة المحلية.</p>
          </aside>

          {/* حاوية رسائل النظام (System Feedback Panel) */}
          {submitStatus !== 'idle' && (
            <Alert variant={submitStatus === 'error' ? 'destructive' : 'default'}>
              <AlertTitle>
                {submitStatus === 'success' ? 'نجاح' : 'خطأ في النظام'}
              </AlertTitle>
              <AlertDescription>
                {submitMessage}
              </AlertDescription>
            </Alert>
          )}

          {/* 4. قسم الإجراء الرئيسي (Call to Action) */}
          <div>
            <Button 
              type="submit" 
              disabled={isSubmitting}
            >
              إضافة الطلب
            </Button>
          </div>

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