'use client'

import React from 'react'
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import type { OrderDetailState, OrderDetailHandlers } from '@/backend/hooks/useOrderDetail'

interface Props {
  state: OrderDetailState
  handlers: OrderDetailHandlers
}

export const OrderDetailView = ({ state, handlers }: Props) => {
  const { 
    isLoading, 
    displayData, 
    isDeleteDialogOpen, 
    isDeleting, 
    statusChangeDialog, 
    isChangingStatus, 
    STATUS_LABELS 
  } = state;

  if (isLoading) {
    return (
      <main>
        <p>جاري تحميل بيانات الطلب...</p>
      </main>
    );
  }

  if (!displayData) {
    return (
      <main>
        <p>الطلب غير موجود أو حدث خطأ أثناء التحميل.</p>
        <Button onClick={handlers.navigateToManagement}>
          العودة لإدارة الطلبات
        </Button>
      </main>
    );
  }

  return (
    <main>
      <menu>
        <Button onClick={handlers.navigateToEdit}>
          تعديل الطلب
        </Button>
        <Button variant="destructive" onClick={() => handlers.setIsDeleteDialogOpen(true)}>
          حذف الطلب
        </Button>
      </menu>

      <article>
        <section>
          <h2>بيانات الزبون</h2>
          <dl>
            <dt>اسم الزبون</dt>
            <dd>{displayData.customer_name}</dd>
            
            <dt>رقم الزبون</dt>
            <dd>{displayData.customer_phone}</dd>
          </dl>

          <h2>بيانات الموقع</h2>
          <dl>
            <dt>المحافظة</dt>
            <dd>{displayData.governorate_name}</dd>
            
            <dt>المنطقة</dt>
            <dd>{displayData.area_name}</dd>
            
            <dt>أقرب نقطة دالة</dt>
            <dd>{displayData.nearest_landmark}</dd>
          </dl>
        </section>

        <section>
          <h2>بيانات التوصيل</h2>
          <dl>
            <dt>اسم السائق</dt>
            <dd>{displayData.driver_name}</dd>
            
            <dt>نوع الطلب</dt>
            <dd>{displayData.order_type}</dd>
          </dl>

          <h2>الطوابع الزمنية</h2>
          <dl>
            <dt>تاريخ الإنشاء</dt>
            <dd>{displayData.created_at_formatted}</dd>
            
            <dt>تاريخ آخر تحديث</dt>
            <dd>{displayData.updated_at_formatted}</dd>
          </dl>
        </section>

        <section>
          <h2>مركز التحكم بالحالة</h2>
          <div>
            <h3>الحالة الحالية</h3>
            <strong>{STATUS_LABELS[displayData.status as keyof typeof STATUS_LABELS]}</strong>
          </div>

          {(displayData.status === 'PENDING' || displayData.status === 'IN_PROGRESS') && (
            <nav>
              {displayData.status === 'PENDING' && (
                <>
                  <Button onClick={() => handlers.openStatusChangeDialog('IN_PROGRESS')}>
                    البدء بالتنفيذ
                  </Button>
                  <Button variant="secondary" onClick={() => handlers.openStatusChangeDialog('CANCELLED')}>
                    إلغاء الطلب
                  </Button>
                </>
              )}
              {displayData.status === 'IN_PROGRESS' && (
                <>
                  <Button onClick={() => handlers.openStatusChangeDialog('DELIVERED')}>
                    تم التوصيل
                  </Button>
                  <Button variant="secondary" onClick={() => handlers.openStatusChangeDialog('CANCELLED')}>
                    إلغاء الطلب
                  </Button>
                </>
              )}
            </nav>
          )}

          <div>
            <h3>سجل الحالات</h3>
            {displayData.histories.length === 0 ? (
              <p>لا يوجد سجل حالات.</p>
            ) : (
              <ul>
                {displayData.histories.map((history: any) => (
                  <li key={history.history_id}>
                    <time>{history.created_at_formatted}</time>
                    <p>
                      {history.from_status ? STATUS_LABELS[history.from_status as keyof typeof STATUS_LABELS] : 'جديد'} 
                      {' -> '} 
                      {STATUS_LABELS[history.to_status as keyof typeof STATUS_LABELS]}
                    </p>
                    <p>المشغل: {history.changed_by_name || 'النظام'}</p>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </section>
      </article>

      <Dialog open={isDeleteDialogOpen} onOpenChange={handlers.setIsDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>تأكيد الحذف</DialogTitle>
            <DialogDescription>
              هل أنت متأكد من رغبتك في حذف هذا الطلب بشكل نهائي؟ هذا الإجراء لا يمكن التراجع عنه وسيحذف كافة سجلات الحالات المرتبطة به.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => handlers.setIsDeleteDialogOpen(false)} disabled={isDeleting}>
              إلغاء
            </Button>
            <Button variant="destructive" onClick={handlers.confirmDelete} disabled={isDeleting}>
              {isDeleting ? 'جاري الحذف...' : 'تأكيد الحذف'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog 
        open={statusChangeDialog.isOpen} 
        onOpenChange={(open) => !open && handlers.setStatusChangeDialog({ isOpen: false, targetStatus: null })}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>تأكيد تغيير الحالة</DialogTitle>
            <DialogDescription>
              هل أنت متأكد من رغبتك في تغيير حالة الطلب إلى &quot;{statusChangeDialog.targetStatus && STATUS_LABELS[statusChangeDialog.targetStatus]}&quot;؟
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => handlers.setStatusChangeDialog({ isOpen: false, targetStatus: null })} disabled={isChangingStatus}>
              إلغاء
            </Button>
            <Button onClick={handlers.confirmStatusChange} disabled={isChangingStatus}>
              {isChangingStatus ? 'جاري التحديث...' : 'تأكيد التغيير'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </main>
  );
};