'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">
        <div className="container mx-auto max-w-4xl">
          <Card className="border-border/40 bg-card/80 backdrop-blur-md shadow-md">
            <CardHeader className="space-y-4">
              <Skeleton className="h-8 w-1/3 bg-muted" />
              <div className="flex gap-4">
                <Skeleton className="h-6 w-24 bg-muted" />
                <Skeleton className="h-6 w-32 bg-muted" />
              </div>
            </CardHeader>
            <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6 p-8">
              {[...Array(6)].map((_, index) => <div key={index} className="space-y-2">
                  <Skeleton className="h-4 w-20 bg-muted" />
                  <Skeleton className="h-12 w-full bg-muted" />
                </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">
        <Card className="max-w-md w-full border-destructive/20 bg-card">
          <CardContent className="pt-8 pb-8 flex flex-col items-center text-center space-y-4">
            <div className="p-4 rounded-full bg-destructive/10 text-destructive">
              <AlertCircle className="w-12 h-12" />
            </div>
            <div className="space-y-2">
              <h3 className="text-xl font-header font-bold text-foreground">الطلب غير موجود</h3>
              <p className="text-muted-foreground font-body">عذراً، لا يمكن العثور على بيانات هذا الطلب حالياً.</p>
            </div>
            <Button variant="outline" onClick={handleCancel} className="w-full h-11 font-body hover:bg-secondary hover:text-secondary-foreground">
              العودة لإدارة الطلبات
            </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">
      <div className="container mx-auto max-w-4xl">
        <Card className="border-border/60 bg-card/95 shadow-lg overflow-hidden ring-1 ring-primary/10">
          <CardHeader className="border-b border-border/40 bg-muted/30 pb-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
              <div className="space-y-1">
                <CardTitle className="text-2xl font-header font-bold text-foreground flex items-center gap-2">
                  <span>تعديل تفاصيل الطلب</span>
                </CardTitle>
                <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground mt-2">
                  <div className="flex items-center gap-1.5 bg-background/50 px-3 py-1 rounded-full border border-border/30">
                    <span className="opacity-70">رقم الطلب:</span>
                    <span className="font-mono font-bold text-primary-foreground/90">{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">
                    <span className="opacity-70">الحالة:</span>
                    <Badge variant="secondary" className="bg-primary/20 text-primary-foreground border-none font-medium">
                      {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">
                    <span className="opacity-70">المبلغ الكلي:</span>
                    <span className="font-mono font-bold text-primary-foreground/90" dir="ltr">{formData.total_amount}</span>
                  </div>
                </div>
              </div>
            </div>
          </CardHeader>

          <CardContent className="pt-8 px-6 md:px-10">
            <form onSubmit={e => e.preventDefault()} className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
              
              {/* القسم الأول: معلومات الزبون */}
              <div className="space-y-2">
                <Label htmlFor="customer_name" className="text-sm font-medium flex items-center gap-2 mb-1">
                  <User className="w-4 h-4 text-primary" />
                  اسم الزبون
                </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" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="customer_phone" className="text-sm font-medium flex items-center gap-2 mb-1">
                  <Phone className="w-4 h-4 text-primary" />
                  رقم الهاتف
                </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" />
              </div>

              {/* القسم الثاني: الموقع */}
              <div className="space-y-2">
                <Label htmlFor="governorate_name" className="text-sm font-medium flex items-center gap-2 mb-1">
                  <MapPin className="w-4 h-4 text-primary" />
                  المحافظة
                </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" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="area_name" className="text-sm font-medium flex items-center gap-2 mb-1">
                  <MapPin className="w-4 h-4 text-primary" />
                  المنطقة
                </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" />
              </div>

              {/* تفاصيل العنوان - كامل العرض */}
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="nearest_landmark" className="text-sm font-medium flex items-center gap-2 mb-1">
                  <MapPin className="w-4 h-4 text-primary" />
                  أقرب نقطة دالة
                </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" />
              </div>

              {/* القسم الثالث: السائق ونوع الطلب */}
              <div className="space-y-2">
                <Label htmlFor="driver_name" className="text-sm font-medium flex items-center gap-2 mb-1">
                  <Truck className="w-4 h-4 text-primary" />
                  اسم السائق
                </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" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="order_type" className="text-sm font-medium flex items-center gap-2 mb-1">
                  <Package className="w-4 h-4 text-primary" />
                  نوع الطلب
                </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" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="total_amount" className="text-sm font-medium flex items-center gap-2 mb-1">
                  <Wallet className="w-4 h-4 text-primary" />
                  المبلغ الكلي
                </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" />
              </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">
            <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">
              <ArrowRight className="w-4 h-4" />
              إلغاء والعودة
            </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">
              <Save className="w-4 h-4" />
              {isSaving ? 'جاري الحفظ...' : 'حفظ التعديلات'}
            </Button>
          </CardFooter>
        </Card>
      </div>
    </section>;
};