'use client'
import React from 'react'
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import type { OrderManagementState, OrderManagementHandlers } from '@/backend/hooks/useOrderManagement'

interface Props {
  state: OrderManagementState
  handlers: OrderManagementHandlers
}

export const OrderManagementView = ({ state, handlers }: Props) => {
  return (
    <main>
      <header>
        <h1>إدارة الطلبات</h1>
        <nav>
          <Button onClick={() => handlers.fetchData()}>تحديث (Refresh)</Button>
          
          <Button onClick={() => handlers.navigateToAnalytics('default')} variant="outline">إحصائيات (الافتراضي)</Button>
          <Button 
            onClick={() => handlers.navigateToAnalytics('date')} 
            variant="outline"
          >
            إحصائيات (تاريخ)
          </Button>
          
          <Button onClick={() => handlers.navigateToExport('default')} variant="outline">تصدير (الافتراضي)</Button>
          <Button onClick={() => handlers.navigateToExport('orders')} variant="outline">تصدير الطلبات</Button>
          <Button 
            onClick={() => handlers.navigateToExport('date')} 
            variant="outline"
          >
            تصدير (تاريخ)
          </Button>
        </nav>
      </header>

      {/* Summary Dashboard */}
      <section>
        <article>
          <h3>إجمالي الطلبات</h3>
          <p>{state.summary?.total_count || 0}</p>
        </article>
        <article onClick={() => handlers.handleKPIStatusClick('PENDING')}>
          <h3>قيد الانتظار</h3>
          <p>{state.summary?.pending_count || 0}</p>
        </article>
        <article onClick={() => handlers.handleKPIStatusClick('IN_PROGRESS')}>
          <h3>قيد التوصيل</h3>
          <p>{state.summary?.in_progress_count || 0}</p>
        </article>
        <article onClick={() => handlers.handleKPIStatusClick('DELIVERED')}>
          <h3>تم التوصيل</h3>
          <p>{state.summary?.delivered_count || 0}</p>
        </article>
        <article onClick={() => handlers.handleKPIStatusClick('CANCELLED')}>
          <h3>ملغى</h3>
          <p>{state.summary?.cancelled_count || 0}</p>
        </article>
      </section>

      {/* Filter Panel */}
      <section>
        <div>
          <Input 
            placeholder="البحث برقم الطلب، اسم الزبون، رقم الهاتف..." 
            value={state.filterForm.keyword}
            onChange={(e) => handlers.handleFormFieldChange('keyword', e.target.value)}
          />
          <Button onClick={handlers.handleApplySearch}>بحث</Button>
        </div>
        
        <form onSubmit={(e) => { e.preventDefault(); handlers.handleApplyFilters(); }}>
          <Select 
            value={state.filterForm.governorateName} 
            onValueChange={(val) => handlers.handleFormFieldChange('governorateName', val === 'ALL' ? '' : val)}
          >
            <SelectTrigger>
              <SelectValue placeholder="اختر المحافظة" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ALL">الكل</SelectItem>
              {state.filterOptions.governorates.map(gov => (
                <SelectItem key={gov} value={gov}>{gov}</SelectItem>
              ))}
            </SelectContent>
          </Select>

          <Select 
            value={state.filterForm.driverName} 
            onValueChange={(val) => handlers.handleFormFieldChange('driverName', val === 'ALL' ? '' : val)}
          >
            <SelectTrigger>
              <SelectValue placeholder="اختر السائق" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ALL">الكل</SelectItem>
              {state.filterOptions.drivers.map(driver => (
                <SelectItem key={driver} value={driver}>{driver}</SelectItem>
              ))}
            </SelectContent>
          </Select>

          <Select 
            value={state.filterForm.orderType} 
            onValueChange={(val) => handlers.handleFormFieldChange('orderType', val === 'ALL' ? '' : val)}
          >
            <SelectTrigger>
              <SelectValue placeholder="نوع الطلب" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ALL">الكل</SelectItem>
              {state.filterOptions.order_types.map(type => (
                <SelectItem key={type} value={type}>{type}</SelectItem>
              ))}
            </SelectContent>
          </Select>

          <Select 
            value={state.filterForm.status} 
            onValueChange={(val) => handlers.handleFormFieldChange('status', val === 'ALL' ? '' : val)}
          >
            <SelectTrigger>
              <SelectValue placeholder="الحالة" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ALL">الكل</SelectItem>
              <SelectItem value="PENDING">قيد الانتظار</SelectItem>
              <SelectItem value="IN_PROGRESS">قيد التوصيل</SelectItem>
              <SelectItem value="DELIVERED">تم التوصيل</SelectItem>
              <SelectItem value="CANCELLED">ملغى</SelectItem>
            </SelectContent>
          </Select>

          <Input 
            type="date" 
            value={state.filterForm.startDate} 
            onChange={(e) => handlers.handleFormFieldChange('startDate', e.target.value)}
          />
          <Input 
            type="date" 
            value={state.filterForm.endDate} 
            onChange={(e) => handlers.handleFormFieldChange('endDate', e.target.value)}
          />

          <Button type="submit">تطبيق الفلاتر</Button>
          <Button type="button" variant="outline" onClick={handlers.handleResetFilters}>إعادة ضبط</Button>
        </form>
      </section>

      {/* Main Data Table */}
      <section>
        {state.isLoading ? (
          <div>جاري التحميل...</div>
        ) : state.list.length === 0 ? (
          <div>لا توجد نتائج مطابقة</div>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>رقم الطلب</TableHead>
                <TableHead>اسم الزبون</TableHead>
                <TableHead>رقم الهاتف</TableHead>
                <TableHead>المحافظة</TableHead>
                <TableHead>المنطقة</TableHead>
                <TableHead>اسم السائق</TableHead>
                <TableHead>نوع الطلب</TableHead>
                <TableHead>الحالة</TableHead>
                <TableHead>تاريخ الإنشاء</TableHead>
                <TableHead>الإجراءات</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {state.list.map(order => (
                <TableRow key={order.order_id}>
                  <TableCell>{order.order_no}</TableCell>
                  <TableCell>{order.customer_name}</TableCell>
                  <TableCell>{order.customer_phone}</TableCell>
                  <TableCell>{order.governorate_name}</TableCell>
                  <TableCell>{order.area_name}</TableCell>
                  <TableCell>{order.driver_name}</TableCell>
                  <TableCell>{order.order_type}</TableCell>
                  <TableCell>{state.statusLabels[order.status]}</TableCell>
                  <TableCell>{new Date(order.created_at).toLocaleString('ar-IQ')}</TableCell>
                  <TableCell>
                    <Button 
                      variant="ghost" 
                      onClick={() => handlers.navigateToDetail(order.order_id)}
                    >
                      عرض
                    </Button>
                    <Button 
                      variant="ghost" 
                      onClick={() => handlers.navigateToEdit(order.order_id)}
                    >
                      تعديل
                    </Button>
                    <Button 
                      variant="destructive" 
                      onClick={() => {
                        handlers.setOrderToDelete(order);
                        handlers.setDeleteModalOpen(true);
                      }}
                    >
                      حذف
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </section>

      {/* Pagination */}
      <footer>
        <p>عرض {state.list.length} نتيجة من أصل {state.total}</p>
        
        <Select 
          value={state.filterForm.pageSize.toString()} 
          onValueChange={(val) => handlers.handleFormFieldChange('pageSize', parseInt(val, 10))}
        >
          <SelectTrigger>
            <SelectValue placeholder="العدد" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="20">20</SelectItem>
            <SelectItem value="50">50</SelectItem>
            <SelectItem value="100">100</SelectItem>
          </SelectContent>
        </Select>

        <nav>
          <Button 
            disabled={state.filterForm.page <= 1} 
            onClick={() => handlers.handlePageChange(1)}
          >
            الأولى
          </Button>
          <Button 
            disabled={state.filterForm.page <= 1} 
            onClick={() => handlers.handlePageChange(state.filterForm.page - 1)}
          >
            السابق
          </Button>
          <span>صفحة {state.filterForm.page} من {state.totalPages}</span>
          <Button 
            disabled={state.filterForm.page >= state.totalPages} 
            onClick={() => handlers.handlePageChange(state.filterForm.page + 1)}
          >
            التالي
          </Button>
          <Button 
            disabled={state.filterForm.page >= state.totalPages} 
            onClick={() => handlers.handlePageChange(state.totalPages)}
          >
            الأخيرة
          </Button>
        </nav>
      </footer>

      {/* Delete Confirmation Modal */}
      <Dialog open={state.deleteModalOpen} onOpenChange={handlers.setDeleteModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>تأكيد حذف الطلب</DialogTitle>
            <DialogDescription>
              هل أنت متأكد من رغبتك في حذف الطلب رقم {state.orderToDelete?.order_no} للزبون {state.orderToDelete?.customer_name}؟ هذا الإجراء نهائي ولا يمكن التراجع عنه.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => handlers.setDeleteModalOpen(false)}>إلغاء الأمر</Button>
            <Button variant="destructive" onClick={handlers.handleDeleteConfirm}>تأكيد الحذف</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </main>
  );
}