'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 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;
  }

  if (isLoading) {
    return (
      <div>
        <Card>
          <CardHeader>
            <Skeleton />
            <Skeleton />
          </CardHeader>
          <CardContent>
            <div>
              <Skeleton />
              <Skeleton />
              <Skeleton />
              <Skeleton />
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (!orderHeader) {
    return (
      <div>
        <Card>
          <CardContent>
            <p>الطلب غير موجود أو تم حذفه</p>
            <Button onClick={handleCancel}>العودة لإدارة الطلبات</Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div>
      <Card>
        <CardHeader>
          <CardTitle>تعديل تفاصيل الطلب</CardTitle>
          <CardDescription>
            <span>رقم الطلب: {orderHeader.order_no}</span>
            <br />
            <span>الحالة الحالية: {STATUS_LABELS[orderHeader.order_status]}</span>
          </CardDescription>
        </CardHeader>

        <CardContent>
          <form onSubmit={(e) => e.preventDefault()}>
            <div>
              <Label htmlFor="customer_name">اسم الزبون</Label>
              <Input
                id="customer_name"
                value={formData.customer_name}
                onChange={(e) => handleFormChange('customer_name', e.target.value)}
                disabled={isSaving}
              />
            </div>

            <div>
              <Label htmlFor="customer_phone">رقم الزبون</Label>
              <Input
                id="customer_phone"
                value={formData.customer_phone}
                onChange={(e) => handleFormChange('customer_phone', e.target.value)}
                disabled={isSaving}
              />
            </div>

            <div>
              <Label htmlFor="governorate_name">اسم المحافظة</Label>
              <Input
                id="governorate_name"
                value={formData.governorate_name}
                onChange={(e) => handleFormChange('governorate_name', e.target.value)}
                disabled={isSaving}
              />
            </div>

            <div>
              <Label htmlFor="area_name">المنطقة</Label>
              <Input
                id="area_name"
                value={formData.area_name}
                onChange={(e) => handleFormChange('area_name', e.target.value)}
                disabled={isSaving}
              />
            </div>

            <div>
              <Label htmlFor="nearest_landmark">أقرب نقطة دالة</Label>
              <Input
                id="nearest_landmark"
                value={formData.nearest_landmark}
                onChange={(e) => handleFormChange('nearest_landmark', e.target.value)}
                disabled={isSaving}
              />
            </div>

            <div>
              <Label htmlFor="driver_name">اسم السائق</Label>
              <Input
                id="driver_name"
                value={formData.driver_name}
                onChange={(e) => handleFormChange('driver_name', e.target.value)}
                disabled={isSaving}
              />
            </div>

            <div>
              <Label htmlFor="order_type">نوع الطلب</Label>
              <Input
                id="order_type"
                value={formData.order_type}
                onChange={(e) => handleFormChange('order_type', e.target.value)}
                disabled={isSaving}
              />
            </div>
          </form>
        </CardContent>

        <CardFooter>
          <Button variant="outline" onClick={handleCancel} disabled={isSaving}>
            إلغاء
          </Button>
          <Button onClick={handleSave} disabled={isSaving}>
            حفظ التعديلات
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}