'use client';

import React from 'react';
import { BarChart3, TrendingUp, Users, MapPin, Calendar, Download, Filter, CheckCircle2, XCircle, LayoutDashboard, Loader2, Wallet } from "lucide-react";
import type { DashboardKpis, MonthlyStatItem, DriverStatItem, GovernorateStatItem } 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';
interface Props {
  state: MonthlyAnalyticsState;
  handlers: MonthlyAnalyticsHandlers;
}

/**
 * MonthlyAnalyticsView
 * A premium dashboard for logistics analytics, adhering to Meshwar's futuristic dark UI.
 * Features: Single-screen layout, RTL support, high-contrast data visualization.
 */
export const MonthlyAnalyticsView = ({
  state,
  handlers
}: Props) => {
  const {
    isLoading,
    analyticsData,
    filterForm
  } = state;
  const {
    handleFilterChange,
    handleApplyFilters,
    handleExportClick
  } = handlers;
  return <div className="min-h-screen bg-background text-foreground font-body dir-rtl overflow-hidden flex flex-col" dir="rtl">
      
      {/* --- HEADER & FILTERS SECTION --- */}
      <section data-controller-name="ترويسة التحكم والفلاتر" className="w-full border-b border-border bg-card/50 backdrop-blur-md">
        <div className="container mx-auto px-8 py-6">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div className="space-y-1">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-primary/10 rounded-lg">
                  <LayoutDashboard className="w-6 h-6 text-primary" />
                </div>
                <h1 className="text-3xl font-display font-bold tracking-tight text-foreground">
                  الإحصائيات والتحليلات
                </h1>
              </div>
              <p className="text-muted-foreground font-header text-sm">
                مراقبة أداء العمليات اللوجستية والنمو الشهري
              </p>
            </div>

            <form onSubmit={e => {
            e.preventDefault();
            handleApplyFilters();
          }} className="flex flex-wrap items-center gap-3">
              <div className="flex items-center gap-2 bg-muted/30 p-1.5 rounded-md border border-border">
                <div className="flex items-center px-3 gap-2">
                  <Calendar className="w-4 h-4 text-muted-foreground" />
                  <span className="text-xs font-header text-muted-foreground">الفترة:</span>
                </div>
                <Input type="date" className="w-40 h-9 bg-transparent border-none focus-visible:ring-0 text-xs" value={filterForm.startDate} onChange={e => handleFilterChange('startDate', e.target.value)} />
                <div className="w-px h-4 bg-border" />
                <Input type="date" className="w-40 h-9 bg-transparent border-none focus-visible:ring-0 text-xs" value={filterForm.endDate} onChange={e => handleFilterChange('endDate', e.target.value)} />
              </div>

              <Button onClick={handleApplyFilters} disabled={isLoading} className="h-10 px-6 bg-primary hover:bg-primary/90 text-primary-foreground shadow-neon-primary gap-2">
                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Filter className="w-4 h-4" />}
                تطبيق
              </Button>

              <Button variant="outline" onClick={handleExportClick} className="h-10 px-6 border-border hover:bg-muted text-foreground gap-2">
                <Download className="w-4 h-4" />
                تصدير التقرير
              </Button>
            </form>
          </div>
        </div>
      </section>

      {/* --- MAIN DASHBOARD CONTENT --- */}
      <main className="flex-1 overflow-auto bg-gradient-hero-bg">
        <div className="container mx-auto px-8 py-8 space-y-8">
          
          {isLoading ? <div className="h-[60vh] flex flex-col items-center justify-center space-y-4">
              <Loader2 className="w-12 h-12 text-primary animate-spin" />
              <p className="text-muted-foreground font-header animate-pulse">جاري استرجاع البيانات التحليلية...</p>
            </div> : !analyticsData ? <div className="h-[60vh] flex flex-col items-center justify-center border-2 border-dashed border-border rounded-xl">
              <BarChart3 className="w-16 h-16 text-muted/20 mb-4" />
              <p className="text-muted-foreground font-header text-lg">لا توجد بيانات متاحة للفترة المحددة</p>
            </div> : <>
              {/* --- KPI SECTION --- */}
              <section data-controller-name="مؤشرات الأداء الرئيسية" className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-6">
                <KPICard title="إجمالي الطلبات" value={analyticsData.kpis.totalOrders} icon={<TrendingUp className="w-5 h-5" />} color="primary" />
                <KPICard title="طلبات الشهر الحالي" value={analyticsData.kpis.currentMonthOrders} icon={<Calendar className="w-5 h-5" />} color="secondary" />
                <KPICard title="الطلبات المنجزة" value={analyticsData.kpis.deliveredOrders} icon={<CheckCircle2 className="w-5 h-5" />} color="success" />
                <KPICard title="الطلبات الملغاة" value={analyticsData.kpis.cancelledOrders} icon={<XCircle className="w-5 h-5" />} color="destructive" />
                <KPICard title="إجمالي المبلغ" value={Number((analyticsData.kpis as any).totalAmount ?? 0)} icon={<Wallet className="w-5 h-5" />} color="secondary" format="currency" />
              </section>

              {/* --- ANALYTICS GRID --- */}
              <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
                
                {/* --- TREND CHART AREA --- */}
                <section data-controller-name="المخطط الزمني للطلبات" className="lg:col-span-8">
                  <Card className="h-full border-border bg-card/40 shadow-md">
                    <CardHeader className="flex flex-row items-center justify-between border-b border-border/50 pb-4">
                      <div className="space-y-1">
                        <CardTitle className="text-lg font-header font-bold text-foreground">
                          أداء الطلبات لآخر 12 شهراً
                        </CardTitle>
                        <p className="text-xs text-muted-foreground">التقلبات الشهرية لنمو حجم العمليات</p>
                      </div>
                      <BarChart3 className="w-5 h-5 text-primary/50" />
                    </CardHeader>
                    <CardContent className="pt-6">
                      <div className="rounded-md border border-border/40 overflow-hidden">
                        <Table>
                          <TableHeader className="bg-muted/50">
                            <TableRow className="hover:bg-transparent border-border">
                              <TableHead className="text-right font-header text-muted-foreground h-12">الشهر</TableHead>
                              <TableHead className="text-left font-header text-muted-foreground h-12">عدد الطلبات</TableHead>
                              <TableHead className="text-left font-header text-muted-foreground h-12">الحالة النسبية</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {analyticsData.monthlyTrend.length > 0 ? analyticsData.monthlyTrend.map((item, index) => <TableRow key={item.month} className="border-border hover:bg-primary/5 transition-colors">
                                  <TableCell className="font-medium text-foreground py-4">{item.month}</TableCell>
                                  <TableCell className="text-left font-body font-bold text-primary py-4">
                                    {item.order_count.toLocaleString()}
                                  </TableCell>
                                  <TableCell className="text-left py-4">
                                    <div className="w-24 h-2 bg-muted rounded-full overflow-hidden">
                                      <div className="h-full bg-primary" style={{
                                width: `${Math.min(item.order_count / (analyticsData.kpis.totalOrders || 1) * 500, 100)}%`
                              }} />
                                    </div>
                                  </TableCell>
                                </TableRow>) : <TableRow><TableCell colSpan={3} className="text-center py-10 text-muted-foreground italic">لا توجد بيانات زمنية</TableCell></TableRow>}
                          </TableBody>
                        </Table>
                      </div>
                    </CardContent>
                  </Card>
                </section>

                {/* --- SIDE ANALYTICS AREA --- */}
                <aside className="lg:col-span-4 flex flex-col gap-8">
                  
                  {/* Governorate Stats */}
                  <section data-controller-name="توزيع المحافظات" className="flex-1">
                    <Card className="h-full border-border bg-card/40 shadow-md">
                      <CardHeader className="flex flex-row items-center gap-3 border-b border-border/50 pb-4">
                        <MapPin className="w-4 h-4 text-accent" />
                        <CardTitle className="text-base font-header font-bold">توزيع المحافظات</CardTitle>
                      </CardHeader>
                      <CardContent className="pt-4">
                        <div className="space-y-4">
                          {analyticsData.governorateStats.length > 0 ? analyticsData.governorateStats.slice(0, 5).map((item, index) => <div key={item.governorateName} className="flex flex-col gap-1.5">
                                <div className="flex justify-between text-sm">
                                  <span className="font-header text-foreground">{item.governorateName}</span>
                                  <span className="font-body font-semibold text-muted-foreground">{item.order_count}</span>
                                </div>
                                <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
                                  <div className="h-full bg-accent" style={{
                            width: `${item.order_count / analyticsData.kpis.totalOrders * 100}%`
                          }} />
                                </div>
                              </div>) : <p className="text-center py-6 text-muted-foreground text-sm">لا توجد بيانات جغرافية</p>}
                        </div>
                      </CardContent>
                    </Card>
                  </section>

                  {/* Driver Stats */}
                  <section data-controller-name="أداء السائقين" className="flex-1">
                    <Card className="h-full border-border bg-card/40 shadow-md">
                      <CardHeader className="flex flex-row items-center gap-3 border-b border-border/50 pb-4">
                        <Users className="w-4 h-4 text-primary" />
                        <CardTitle className="text-base font-header font-bold">أفضل السائقين إنجازاً</CardTitle>
                      </CardHeader>
                      <CardContent className="p-0">
                        <Table>
                          <TableBody>
                            {analyticsData.driverStats.length > 0 ? analyticsData.driverStats.slice(0, 5).map((item, index) => <TableRow key={item.driverName} className="border-border hover:bg-muted/30">
                                  <TableCell className="py-3 px-4">
                                    <div className="flex items-center gap-3">
                                      <span className="text-xs font-bold text-muted-foreground w-4">{index + 1}</span>
                                      <span className="font-header text-sm text-foreground">{item.driverName}</span>
                                    </div>
                                  </TableCell>
                                  <TableCell className="text-left py-3 px-4 font-body font-semibold text-primary">
                                    {item.order_count}
                                  </TableCell>
                                </TableRow>) : <TableRow><TableCell className="text-center py-8 text-muted-foreground text-sm">لا توجد بيانات أداء</TableCell></TableRow>}
                          </TableBody>
                        </Table>
                      </CardContent>
                    </Card>
                  </section>

                </aside>
              </div>
            </>}
        </div>
      </main>
    </div>;
};

/**
 * KPI Card Sub-component
 */
interface KPICardProps {
  title: string;
  value: number;
  icon: React.ReactNode;
  color: 'primary' | 'secondary' | 'success' | 'destructive';
  format?: 'number' | 'currency';
}
const KPICard = ({
  title,
  value,
  icon,
  color,
  format = 'number'
}: KPICardProps) => {
  const formattedValue = format === 'currency'
    ? `${value.toLocaleString('ar-EG', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} د.ع`
    : value.toLocaleString();
  const colorMap = {
    primary: 'text-primary border-primary/20 bg-primary/5 shadow-neon-primary',
    secondary: 'text-meshwar-orange border-meshwar-orange/20 bg-meshwar-orange/5',
    success: 'text-emerald-500 border-emerald-500/20 bg-emerald-500/5',
    destructive: 'text-destructive border-destructive/20 bg-destructive/5'
  };
  return <Card className={`relative overflow-hidden border-border bg-card/60 transition-all hover:translate-y-[-2px] hover:shadow-md`}>
      <CardContent className="p-6">
        <div className="flex items-center justify-between mb-4">
          <div className={`p-2.5 rounded-lg border ${colorMap[color]}`}>
            {icon}
          </div>
          <span className="text-xs font-header font-medium text-muted-foreground uppercase tracking-wider">
            المؤشر المباشر
          </span>
        </div>
        <div className="space-y-1">
          <p className="text-sm font-header text-muted-foreground">{title}</p>
          <h3 className="text-3xl font-body font-bold text-foreground">
            {formattedValue}
          </h3>
        </div>
        {/* Subtle decorative glow */}
        <div className={`absolute -bottom-6 -right-6 w-24 h-24 rounded-full blur-3xl opacity-10 ${color === 'primary' ? 'bg-primary' : color === 'secondary' ? 'bg-accent' : 'bg-foreground'}`} />
      </CardContent>
    </Card>;
};
export default MonthlyAnalyticsView;