'use client'

import React from 'react'
import type {
  DashboardKpis,
  MonthlyStatItem,
  DriverStatItem,
  GovernorateStatItem,
  DeliveryOrderStatus
} from '@/backend/actions/MonthlyAnalytics';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";
import type { MonthlyAnalyticsState, MonthlyAnalyticsHandlers } from '@/backend/hooks/useMonthlyAnalytics';

// ===== 枚举映射 =====
const STATUS_LABELS: Record<DeliveryOrderStatus, string> = {
  PENDING: 'قيد الانتظار',
  IN_PROGRESS: 'قيد التوصيل',
  DELIVERED: 'تم التوصيل',
  CANCELLED: 'ملغى'
};

interface Props {
  state: MonthlyAnalyticsState;
  handlers: MonthlyAnalyticsHandlers;
}

export const MonthlyAnalyticsView = ({ state, handlers }: Props) => {
  const { isLoading, analyticsData, filterForm } = state;
  const { handleFilterChange, handleApplyFilters, handleExportClick } = handlers;

  // ===== Render Helpers =====
  const renderKPIs = (kpis: DashboardKpis) => (
    <section>
      <Card>
        <CardHeader>
          <CardTitle>إجمالي الطلبات</CardTitle>
        </CardHeader>
        <CardContent>
          <p>{kpis?.totalOrders ?? 0}</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>طلبات الشهر الحالي</CardTitle>
        </CardHeader>
        <CardContent>
          <p>{kpis?.currentMonthOrders ?? 0}</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>الطلبات المنجزة</CardTitle>
        </CardHeader>
        <CardContent>
          <p>{kpis?.deliveredOrders ?? 0}</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>الطلبات الملغاة</CardTitle>
        </CardHeader>
        <CardContent>
          <p>{kpis?.cancelledOrders ?? 0}</p>
        </CardContent>
      </Card>
    </section>
  );

  const renderTrendChart = (trend: MonthlyStatItem[]) => (
    <Card>
      <CardHeader>
        <CardTitle>أداء الطلبات لآخر 12 شهراً</CardTitle>
      </CardHeader>
      <CardContent>
        {trend && trend.length > 0 ? (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>الشهر</TableHead>
                <TableHead>عدد الطلبات</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {trend.map((item) => (
                <TableRow key={item.month}>
                  <TableCell>{item.month}</TableCell>
                  <TableCell>{item.order_count}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        ) : (
          <p>لا توجد بيانات</p>
        )}
      </CardContent>
    </Card>
  );

  const renderGovernorateStats = (stats: GovernorateStatItem[]) => (
    <Card>
      <CardHeader>
        <CardTitle>تحليل الطلبات حسب المحافظة</CardTitle>
      </CardHeader>
      <CardContent>
        {stats && stats.length > 0 ? (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>المحافظة</TableHead>
                <TableHead>عدد الطلبات</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {stats.map((item) => (
                <TableRow key={item.governorateName}>
                  <TableCell>{item.governorateName}</TableCell>
                  <TableCell>{item.order_count}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        ) : (
          <p>لا توجد بيانات</p>
        )}
      </CardContent>
    </Card>
  );

  const renderDriverStats = (stats: DriverStatItem[]) => (
    <Card>
      <CardHeader>
        <CardTitle>ترتيب السائقين</CardTitle>
      </CardHeader>
      <CardContent>
        {stats && stats.length > 0 ? (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>السائق</TableHead>
                <TableHead>عدد الطلبات</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {stats.map((item) => (
                <TableRow key={item.driverName}>
                  <TableCell>{item.driverName}</TableCell>
                  <TableCell>{item.order_count}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        ) : (
          <p>لا توجد بيانات</p>
        )}
      </CardContent>
    </Card>
  );

  return (
    <div>
      <header>
        <div>
          <Input 
            type="date" 
            placeholder="من تاريخ"
            value={filterForm.startDate}
            onChange={(e) => handleFilterChange('startDate', e.target.value)}
          />
          <Input 
            type="date" 
            placeholder="إلى تاريخ"
            value={filterForm.endDate}
            onChange={(e) => handleFilterChange('endDate', e.target.value)}
          />
          <Button onClick={handleApplyFilters} disabled={isLoading}>
            تطبيق المرشحات
          </Button>
          <Button variant="outline" onClick={handleExportClick}>
            تصدير التقارير
          </Button>
        </div>
      </header>

      <main>
        {isLoading ? (
          <div>
            <p>جاري تحميل البيانات...</p>
          </div>
        ) : !analyticsData ? (
          <div>
            <p>لا توجد بيانات لعرضها في هذه الفترة.</p>
          </div>
        ) : (
          <article>
            {renderKPIs(analyticsData.kpis)}
            
            <section>
              <div>
                {renderTrendChart(analyticsData.monthlyTrend)}
              </div>
              
              <div>
                <div>
                  {renderGovernorateStats(analyticsData.governorateStats)}
                </div>
                <div>
                  {renderDriverStats(analyticsData.driverStats)}
                </div>
              </div>
            </section>
          </article>
        )}
      </main>
    </div>
  );
};