'use client'
import React from 'react'
import type { ReportExportState, ReportExportHandlers } from '@/backend/hooks/useReportExport'
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import type { ReportType, DeliveryOrderStatus } from '@/backend/actions/ReportExport';

interface Props {
  state: ReportExportState;
  handlers: ReportExportHandlers;
}

export const ReportExportView = ({ state, handlers }: Props) => {
  return (
    <main>
      <header>
        <h1>تصدير التقارير</h1>
        <Button onClick={handlers.handleGoToAnalytics} variant="outline">
          الذهاب للإحصائيات الشهرية
        </Button>
      </header>

      <section>
        <ToggleGroup 
          type="single" 
          value={state.reportType} 
          onValueChange={(val) => val && handlers.setReportType(val as ReportType)}
        >
          <ToggleGroupItem value="ORDERS">{state.REPORT_TYPE_LABELS['ORDERS']}</ToggleGroupItem>
          <ToggleGroupItem value="DRIVERS">{state.REPORT_TYPE_LABELS['DRIVERS']}</ToggleGroupItem>
          <ToggleGroupItem value="GOVERNORATES">{state.REPORT_TYPE_LABELS['GOVERNORATES']}</ToggleGroupItem>
        </ToggleGroup>
      </section>

      <section>
        <div>
          <label>من تاريخ</label>
          <Input 
            type="date" 
            value={state.startDate} 
            onChange={(e) => handlers.setStartDate(e.target.value)} 
          />
        </div>
        <div>
          <label>إلى تاريخ</label>
          <Input 
            type="date" 
            value={state.endDate} 
            onChange={(e) => handlers.setEndDate(e.target.value)} 
          />
        </div>
        <div>
          <label>المحافظة</label>
          <Input
            value={state.localGovernorateName}
            onChange={(e) => handlers.handleGovChange(e.target.value)}
            onCompositionStart={handlers.handleGovCompositionStart}
            onCompositionEnd={handlers.handleGovCompositionEnd}
            placeholder="ادخل اسم المحافظة"
          />
        </div>
        <div>
          <label>اسم السائق</label>
          <Input
            value={state.localDriverName}
            onChange={(e) => handlers.handleDriverChange(e.target.value)}
            onCompositionStart={handlers.handleDriverCompositionStart}
            onCompositionEnd={handlers.handleDriverCompositionEnd}
            placeholder="ادخل اسم السائق"
          />
        </div>
        <div>
          <label>حالة الطلب</label>
          <Select 
            value={state.status} 
            onValueChange={(val) => handlers.setStatus(val as DeliveryOrderStatus | '')}
          >
            <SelectTrigger>
              <SelectValue placeholder="الكل" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="">الكل</SelectItem>
              <SelectItem value="PENDING">{state.STATUS_LABELS['PENDING']}</SelectItem>
              <SelectItem value="IN_PROGRESS">{state.STATUS_LABELS['IN_PROGRESS']}</SelectItem>
              <SelectItem value="DELIVERED">{state.STATUS_LABELS['DELIVERED']}</SelectItem>
              <SelectItem value="CANCELLED">{state.STATUS_LABELS['CANCELLED']}</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </section>

      <section>
        {state.isLoading ? (
          <div>جاري تحميل البيانات...</div>
        ) : !state.hasData ? (
          <div>لا توجد بيانات مطابقة للمرشحات الحالية لتصديرها.</div>
        ) : (
          <div>
            {state.reportType === 'ORDERS' && (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>رقم الطلب</TableHead>
                    <TableHead>المحافظة</TableHead>
                    <TableHead>اسم العميل</TableHead>
                    <TableHead>اسم السائق</TableHead>
                    <TableHead>الحالة</TableHead>
                    <TableHead>تاريخ الإنشاء</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {state.reportData.orders?.slice(0, 50).map(order => (
                    <TableRow key={order.order_id}>
                      <TableCell>{order.order_no}</TableCell>
                      <TableCell>{order.governorate_name}</TableCell>
                      <TableCell>{order.customer_name}</TableCell>
                      <TableCell>{order.driver_name}</TableCell>
                      <TableCell>{state.STATUS_LABELS[order.status]}</TableCell>
                      <TableCell>{new Date(order.created_at).toLocaleDateString('ar-IQ')}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}

            {state.reportType === 'DRIVERS' && (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>اسم السائق</TableHead>
                    <TableHead>إجمالي الطلبات</TableHead>
                    <TableHead>قيد الانتظار</TableHead>
                    <TableHead>تم التوصيل</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {state.reportData.drivers?.map((driver, index) => (
                    <TableRow key={index}>
                      <TableCell>{driver.driver_name}</TableCell>
                      <TableCell>{driver.total_orders}</TableCell>
                      <TableCell>{driver.pending_orders}</TableCell>
                      <TableCell>{driver.delivered_orders}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}

            {state.reportType === 'GOVERNORATES' && (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>المحافظة</TableHead>
                    <TableHead>إجمالي الطلبات</TableHead>
                    <TableHead>قيد الانتظار</TableHead>
                    <TableHead>تم التوصيل</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {state.reportData.governorates?.map((gov, index) => (
                    <TableRow key={index}>
                      <TableCell>{gov.governorate_name}</TableCell>
                      <TableCell>{gov.total_orders}</TableCell>
                      <TableCell>{gov.pending_orders}</TableCell>
                      <TableCell>{gov.delivered_orders}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
            <div>عرض معاينة لأول 50 سجل فقط. التصدير سيشمل كافة السجلات المطابقة.</div>
          </div>
        )}
      </section>

      <footer>
        <Button onClick={handlers.handleExportCSV} disabled={!state.hasData || state.isLoading}>
          تصدير Excel (CSV)
        </Button>
        <Button onClick={handlers.handleExportPDF} disabled={!state.hasData || state.isLoading}>
          تصدير PDF
        </Button>
      </footer>
    </main>
  );
}