'use client';

import React from 'react';
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';
import { Badge } from '@/components/ui/badge';
import { AlertCircle, ArrowRight, Save, User, Phone, MapPin, Truck, Package, Wallet } from 'lucide-react';
import type { OrderEditState, OrderEditHandlers } from '@/backend/hooks/useOrderEdit';
interface Props {
  state: OrderEditState;
  handlers: OrderEditHandlers;
}
export const OrderEditView = ({
  state,
  handlers
}: Props) => {
  const {
    isLoading,
    isSaving,
    orderHeader,
    formData,
    id,
    STATUS_LABELS
  } = state;
  const {
    handleFormChange,
    handleSave,
    handleCancel
  } = handlers;
  if (!id) return null;

  // --- Loading State ---
  if (isLoading) {
    return <section data-controller-name="تحميل تعديل الطلب" className="min-h-screen w-full flex items-center justify-center bg-[var(--gradient-hero-bg)] p-4" data-api-unique-id='ordereditview-r3dc0d2b475e1cfbc-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
        <div className="container mx-auto max-w-4xl" data-api-unique-id='ordereditview-r37d554db1cfafee0-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
          <Card className="border-border/40 bg-card/80 backdrop-blur-md shadow-md" data-api-unique-id='ordereditview-r04b7f947c1b5d827-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
            <CardHeader className="space-y-4" data-api-unique-id='ordereditview-r2b9efb3cb107e4f4-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
              <Skeleton className="h-8 w-1/3 bg-muted" data-api-unique-id='ordereditview-rc9f7b6c832e3203f-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              <div className="flex gap-4" data-api-unique-id='ordereditview-rec823226f8a576e0-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <Skeleton className="h-6 w-24 bg-muted" data-api-unique-id='ordereditview-r41d20dd6a3d3cc73-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
                <Skeleton className="h-6 w-32 bg-muted" data-api-unique-id='ordereditview-rbb782a71375e274d-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              </div>
            </CardHeader>
            <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6 p-8" data-api-unique-id='ordereditview-r294ecea422adf08f-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
              {[...Array(6)].map((_, index) => <div key={index} className="space-y-2" data-api-unique-id='ordereditview-r1f575e525a5e46f6-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' data-api-in-loop='1'>
                  <Skeleton className="h-4 w-20 bg-muted" data-api-unique-id='ordereditview-r69b5eb17dc5ed74c-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' data-api-in-loop='1' />
                  <Skeleton className="h-12 w-full bg-muted" data-api-unique-id='ordereditview-r903c5191be2cf679-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' data-api-in-loop='1' />
                </div>)}
            </CardContent>
          </Card>
        </div>
      </section>;
  }

  // --- Error State ---
  if (!orderHeader) {
    return <section data-controller-name="خطأ في جلب الطلب" className="min-h-screen w-full flex items-center justify-center bg-[var(--gradient-hero-bg)] p-4" data-api-unique-id='ordereditview-r803b879d54c78523-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
        <Card className="max-w-md w-full border-destructive/20 bg-card" data-api-unique-id='ordereditview-r58f1225f1412e9b2-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
          <CardContent className="pt-8 pb-8 flex flex-col items-center text-center space-y-4" data-api-unique-id='ordereditview-r0bbfbb51ead5921d-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
            <div className="p-4 rounded-full bg-destructive/10 text-destructive" data-api-unique-id='ordereditview-rc2eba86074630fb0-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
              <AlertCircle className="w-12 h-12" data-api-unique-id='ordereditview-r6bffbae98cbd4164-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
            </div>
            <div className="space-y-2" data-api-unique-id='ordereditview-red692abda72afc46-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
              <h3 className="text-xl font-header font-bold text-foreground" data-api-unique-id='ordereditview-r1113cf6f452c3ad8-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>الطلب غير موجود</h3>
              <p className="text-muted-foreground font-body" data-api-unique-id='ordereditview-r50543c432a70bed0-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>عذراً، لا يمكن العثور على بيانات هذا الطلب حالياً.</p>
            </div>
            <Button variant="outline" onClick={handleCancel} className="w-full h-11 font-body hover:bg-secondary hover:text-secondary-foreground" data-api-unique-id='ordereditview-rf28feda22b66cfec-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
              العودة لإدارة الطلبات
            </Button>
          </CardContent>
        </Card>
      </section>;
  }

  // --- Main Edit Form ---
  return <section data-controller-name="تعديل تفاصيل الطلب" className="min-h-screen w-full flex items-center justify-center bg-[var(--gradient-hero-bg)] py-12 px-4 font-body" dir="rtl" data-api-unique-id='ordereditview-rad4e109961631ae5-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
      <div className="container mx-auto max-w-4xl" data-api-unique-id='ordereditview-re7d3f97b00e4455e-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
        <Card className="border-border/60 bg-card/95 shadow-lg overflow-hidden ring-1 ring-primary/10" data-api-unique-id='ordereditview-rf0dff1550e5a8f7d-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
          <CardHeader className="border-b border-border/40 bg-muted/30 pb-6" data-api-unique-id='ordereditview-r91c350ff3f9d4e72-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4" data-api-unique-id='ordereditview-r29f489ead63edad6-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
              <div className="space-y-1" data-api-unique-id='ordereditview-r5a37b999577ebbe9-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <CardTitle className="text-2xl font-header font-bold text-foreground flex items-center gap-2" data-api-unique-id='ordereditview-rf3dfaeb37196d226-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <span data-api-unique-id='ordereditview-r46080a557ef8a09b-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>تعديل تفاصيل الطلب</span>
                </CardTitle>
                <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground mt-2" data-api-unique-id='ordereditview-re17fed8f5b9a9229-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <div className="flex items-center gap-1.5 bg-background/50 px-3 py-1 rounded-full border border-border/30" data-api-unique-id='ordereditview-r6496148de244c55d-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                    <span className="opacity-70" data-api-unique-id='ordereditview-r5a79344f622afc2b-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>رقم الطلب:</span>
                    <span className="font-mono font-bold text-primary-foreground/90" data-api-unique-id='ordereditview-r1f000e27b0d7b108-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>{orderHeader.order_no}</span>
                  </div>
                  <div className="flex items-center gap-1.5 bg-background/50 px-3 py-1 rounded-full border border-border/30" data-api-unique-id='ordereditview-rfb14491a453a8cf4-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                    <span className="opacity-70" data-api-unique-id='ordereditview-rf2c7dfb12e094e2b-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>الحالة:</span>
                    <Badge variant="secondary" className="bg-primary/20 text-primary-foreground border-none font-medium" data-api-unique-id='ordereditview-re2256ad80f67f1f2-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                      {STATUS_LABELS[orderHeader.order_status]}
                    </Badge>
                  </div>
                  <div className="flex items-center gap-1.5 bg-background/50 px-3 py-1 rounded-full border border-border/30" data-api-unique-id='ordereditview-r21fdd04c8fd6c6eb-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                    <span className="opacity-70" data-api-unique-id='ordereditview-r7d1efdced15c930d-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>المبلغ الكلي:</span>
                    <span className="font-mono font-bold text-primary-foreground/90" dir="ltr" data-api-unique-id='ordereditview-r27cee42b4dbd1e6f-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>{formData.total_amount}</span>
                  </div>
                </div>
              </div>
            </div>
          </CardHeader>

          <CardContent className="pt-8 px-6 md:px-10" data-api-unique-id='ordereditview-re818247eca10ce96-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
            <form onSubmit={e => e.preventDefault()} className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6" data-api-unique-id='ordereditview-rac792f92da83c5cd-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
              
              {/* القسم الأول: معلومات الزبون */}
              <div className="space-y-2" data-api-unique-id='ordereditview-rb9a48e34746e4a5d-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <Label htmlFor="customer_name" className="text-sm font-medium flex items-center gap-2 mb-1" data-api-unique-id='ordereditview-r758bc74d8bd5a0fc-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <User className="w-4 h-4 text-primary" data-api-unique-id='ordereditview-r7aa0592afc543b7e-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
                  اسم الزبون
                </Label>
                <Input id="customer_name" value={formData.customer_name} onChange={e => handleFormChange('customer_name', e.target.value)} disabled={isSaving} placeholder="أدخل الاسم الكامل للزبون" className="h-12 px-4 bg-input border-border/50 focus:ring-primary focus:shadow-neon-primary transition-all" data-api-unique-id='ordereditview-r32a5a57f3ba9b8ed-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              </div>

              <div className="space-y-2" data-api-unique-id='ordereditview-ra33997a0479df52e-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <Label htmlFor="customer_phone" className="text-sm font-medium flex items-center gap-2 mb-1" data-api-unique-id='ordereditview-r92213d681002e2f6-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <Phone className="w-4 h-4 text-primary" data-api-unique-id='ordereditview-r52f3a9fffa843785-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
                  رقم الهاتف
                </Label>
                <Input id="customer_phone" value={formData.customer_phone} onChange={e => handleFormChange('customer_phone', e.target.value)} disabled={isSaving} placeholder="07XXXXXXXXX" className="h-12 px-4 bg-input border-border/50 focus:ring-primary focus:shadow-neon-primary transition-all text-left" dir="ltr" data-api-unique-id='ordereditview-r025554fa82e57986-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              </div>

              {/* القسم الثاني: الموقع */}
              <div className="space-y-2" data-api-unique-id='ordereditview-raf1b9f2bbd932d0e-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <Label htmlFor="governorate_name" className="text-sm font-medium flex items-center gap-2 mb-1" data-api-unique-id='ordereditview-rcb17d96ba091fc80-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <MapPin className="w-4 h-4 text-primary" data-api-unique-id='ordereditview-r69d23dfb943be4ac-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
                  المحافظة
                </Label>
                <Input id="governorate_name" value={formData.governorate_name} onChange={e => handleFormChange('governorate_name', e.target.value)} disabled={isSaving} className="h-12 px-4 bg-input border-border/50 focus:ring-primary focus:shadow-neon-primary transition-all" data-api-unique-id='ordereditview-r65407589040e962a-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              </div>

              <div className="space-y-2" data-api-unique-id='ordereditview-r77dd8270c7347263-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <Label htmlFor="area_name" className="text-sm font-medium flex items-center gap-2 mb-1" data-api-unique-id='ordereditview-rbdaf67882223a08a-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <MapPin className="w-4 h-4 text-primary" data-api-unique-id='ordereditview-r01a9a86e5dfdab34-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
                  المنطقة
                </Label>
                <Input id="area_name" value={formData.area_name} onChange={e => handleFormChange('area_name', e.target.value)} disabled={isSaving} className="h-12 px-4 bg-input border-border/50 focus:ring-primary focus:shadow-neon-primary transition-all" data-api-unique-id='ordereditview-r4d1ae36c3ab775be-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              </div>

              {/* تفاصيل العنوان - كامل العرض */}
              <div className="space-y-2 md:col-span-2" data-api-unique-id='ordereditview-r37f26091f0d1bd60-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <Label htmlFor="nearest_landmark" className="text-sm font-medium flex items-center gap-2 mb-1" data-api-unique-id='ordereditview-rc9ed1bd7e313130d-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <MapPin className="w-4 h-4 text-primary" data-api-unique-id='ordereditview-rd51f4e8b93b57ff7-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
                  أقرب نقطة دالة
                </Label>
                <Input id="nearest_landmark" value={formData.nearest_landmark} onChange={e => handleFormChange('nearest_landmark', e.target.value)} disabled={isSaving} placeholder="مثال: قرب صيدلية البورصة" className="h-12 px-4 bg-input border-border/50 focus:ring-primary focus:shadow-neon-primary transition-all" data-api-unique-id='ordereditview-r81624433cc57d0c6-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              </div>

              {/* القسم الثالث: السائق ونوع الطلب */}
              <div className="space-y-2" data-api-unique-id='ordereditview-rc6bcff83ad85d963-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <Label htmlFor="driver_name" className="text-sm font-medium flex items-center gap-2 mb-1" data-api-unique-id='ordereditview-r23e8080de72584df-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <Truck className="w-4 h-4 text-primary" data-api-unique-id='ordereditview-r292961a3fdb267b1-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
                  اسم السائق
                </Label>
                <Input id="driver_name" value={formData.driver_name} onChange={e => handleFormChange('driver_name', e.target.value)} disabled={isSaving} className="h-12 px-4 bg-input border-border/50 focus:ring-primary focus:shadow-neon-primary transition-all" data-api-unique-id='ordereditview-r2534c41e1ebaeb47-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              </div>

              <div className="space-y-2" data-api-unique-id='ordereditview-r432d58725965ff18-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <Label htmlFor="order_type" className="text-sm font-medium flex items-center gap-2 mb-1" data-api-unique-id='ordereditview-re06ce87997a555c7-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <Package className="w-4 h-4 text-primary" data-api-unique-id='ordereditview-rc89e4ec16c861570-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
                  نوع الطلب
                </Label>
                <Input id="order_type" value={formData.order_type} onChange={e => handleFormChange('order_type', e.target.value)} disabled={isSaving} className="h-12 px-4 bg-input border-border/50 focus:ring-primary focus:shadow-neon-primary transition-all" data-api-unique-id='ordereditview-r596f596d1d7dbb9c-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              </div>

              <div className="space-y-2" data-api-unique-id='ordereditview-r23a7e946f9dafe38-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                <Label htmlFor="total_amount" className="text-sm font-medium flex items-center gap-2 mb-1" data-api-unique-id='ordereditview-r2660b84b22e8ad99-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
                  <Wallet className="w-4 h-4 text-primary" data-api-unique-id='ordereditview-r6de16b4107d528ff-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
                  المبلغ الكلي
                </Label>
                <Input id="total_amount" value={formData.total_amount} onChange={e => handleFormChange('total_amount', e.target.value)} disabled={isSaving} placeholder="0.00" inputMode="decimal" className="h-12 px-4 bg-input border-border/50 focus:ring-primary focus:shadow-neon-primary transition-all text-left" dir="ltr" data-api-unique-id='ordereditview-r6662cb7955280e51-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              </div>
            </form>
          </CardContent>

          <CardFooter className="flex flex-col-reverse md:flex-row items-center justify-between gap-4 p-6 md:px-10 bg-muted/10 border-t border-border/40 mt-8" data-api-unique-id='ordereditview-r60deee00a901f0b8-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
            <Button variant="outline" onClick={handleCancel} disabled={isSaving} className="w-full md:w-auto min-w-[140px] h-11 font-medium border-border/60 hover:bg-secondary hover:text-secondary-foreground gap-2" data-api-unique-id='ordereditview-r8f521afad5b51ab6-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
              <ArrowRight className="w-4 h-4" data-api-unique-id='ordereditview-r4a7f6cd9d6cb6ad9-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              إلغاء والعودة
            </Button>
            
            <Button onClick={handleSave} disabled={isSaving} className="w-full md:w-auto min-w-[180px] h-11 bg-accent hover:bg-accent/90 text-accent-foreground font-bold shadow-neon-accent gap-2 transition-all active:scale-95" data-api-unique-id='ordereditview-r520d4aeafafde5cc-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView'>
              <Save className="w-4 h-4" data-api-unique-id='ordereditview-r6a5526c50970291e-s2304408726' data-api-unique-page-name='src/backend/components/OrderEditView' />
              {isSaving ? 'جاري الحفظ...' : 'حفظ التعديلات'}
            </Button>
          </CardFooter>
        </Card>
      </div>
    </section>;
};