import React, { useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useShipmentsByMethodReport } from '../core/_hooks';
import { ShipmentsByMethodFilters } from '../core/_models';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
import { Table } from '@/components/ui/Table';
import { TableColumn } from '@/types';
import { JalaliDateTimePicker } from '@/components/ui/JalaliDateTimePicker';
import { PageContainer, PageTitle } from '@/components/ui/Typography';
import { Pagination } from '@/components/ui/Pagination';
import { Filter, Truck, DollarSign, Package, Users, Clock, X } from 'lucide-react';
import { formatWithThousands, parseFormattedNumber, persianToEnglish } from '@/utils/numberUtils';
import { formatCurrency, formatDateTime } from '@/utils/formatters';
import { ReportSkeleton } from '@/components/common/ReportSkeleton';

const formatWeight = (weight: number) => {
  return formatWithThousands(weight) + ' گرم';
};

const ShipmentsByMethodReportPage = () => {
  const [searchParams] = useSearchParams();
  const initialShippingMethodId = useMemo(() => {
    const value = searchParams.get('shipping_method_id');
    if (!value) return undefined;
    const parsed = Number(value);
    return Number.isFinite(parsed) ? parsed : undefined;
  }, [searchParams]);
  const initialShippingMethodCode = useMemo(() => {
    const value = searchParams.get('shipping_method_code');
    return value || undefined;
  }, [searchParams]);

  const [filters, setFilters] = useState<ShipmentsByMethodFilters>({
    limit: 50,
    offset: 0,
    group_by_method: false,
    ...(initialShippingMethodId ? { shipping_method_id: initialShippingMethodId } : {}),
    ...(initialShippingMethodCode ? { shipping_method_code: initialShippingMethodCode } : {}),
  });

  const { data, isLoading, error } = useShipmentsByMethodReport(filters);

  const handleFilterChange = (key: keyof ShipmentsByMethodFilters, value: any) => {
    setFilters(prev => ({
      ...prev,
      [key]: value,
      offset: 0,
    }));
  };

  const handleDateRangeChange = (from: string | undefined, to: string | undefined) => {
    setFilters(prev => ({
      ...prev,
      date_range: {
        from,
        to,
      },
      offset: 0,
    }));
  };

  const handleNumericFilterChange = (key: 'shipping_method_id' | 'user_id' | 'min_shipping_cost' | 'max_shipping_cost', raw: string) => {
    const converted = persianToEnglish(raw).replace(/[^\d]/g, '');
    const numeric = converted ? Number(converted) : undefined;
    handleFilterChange(key, numeric);
  };

  const handlePageChange = (page: number) => {
    setFilters(prev => ({
      ...prev,
      offset: (page - 1) * prev.limit,
    }));
  };

  const handleClearFilters = () => {
    setFilters({
      limit: 50,
      offset: 0,
      group_by_method: false,
    });
  };

  const columns: TableColumn[] = [
    {
      key: 'order_number',
      label: 'شماره سفارش',
      align: 'right',
    },
    {
      key: 'customer_name',
      label: 'نام مشتری',
      align: 'right',
    },
    {
      key: 'customer_phone',
      label: 'شماره تماس',
      align: 'right',
    },
    {
      key: 'shipping_method',
      label: 'روش ارسال',
      align: 'right',
    },
    {
      key: 'shipping_cost',
      label: 'هزینه ارسال',
      align: 'right',
    },
    {
      key: 'order_amount',
      label: 'مبلغ سفارش',
      align: 'right',
    },
    {
      key: 'total_weight',
      label: 'وزن',
      align: 'right',
    },
    {
      key: 'status',
      label: 'وضعیت',
      align: 'right',
    },
    {
      key: 'payment_status',
      label: 'وضعیت پرداخت',
      align: 'right',
    },
    {
      key: 'created_at',
      label: 'زمان ثبت',
      align: 'right',
    },
  ];

  const tableData = (data?.shipments || []).map(shipment => ({
    order_number: shipment.order_number || '-',
    customer_name: shipment.customer_name || '-',
    customer_phone: shipment.customer_phone || '-',
    shipping_method: shipment.shipping_method || '-',
    shipping_cost: formatCurrency(shipment.shipping_cost),
    order_amount: formatCurrency(shipment.order_amount),
    total_weight: formatWeight(shipment.total_weight),
    status: shipment.status,
    payment_status: shipment.payment_status,
    created_at: formatDateTime(shipment.created_at),
  })) || [];

  const currentPage = Math.floor(filters.offset / filters.limit) + 1;
  const totalPages = data ? Math.ceil(data.total / filters.limit) : 1;

  return (
    <PageContainer>
      <PageTitle>گزارش ارسال‌ها بر اساس روش</PageTitle>

      {/* Summary Cards */}
      {data?.summary && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
          <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
                <Truck className="h-5 w-5 text-blue-600 dark:text-blue-400" />
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">کل ارسال‌ها</p>
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                  {formatWithThousands(data.summary.total_shipments)}
                </p>
              </div>
            </div>
          </div>

          <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-green-100 dark:bg-green-900 rounded-lg">
                <DollarSign className="h-5 w-5 text-green-600 dark:text-green-400" />
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">مجموع هزینه ارسال</p>
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                  {formatCurrency(data.summary.total_shipping_cost)}
                </p>
              </div>
            </div>
          </div>

          <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-purple-100 dark:bg-purple-900 rounded-lg">
                <Package className="h-5 w-5 text-purple-600 dark:text-purple-400" />
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">مجموع مبلغ سفارشات</p>
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                  {formatCurrency(data.summary.total_order_amount)}
                </p>
              </div>
            </div>
          </div>

          <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-yellow-100 dark:bg-yellow-900 rounded-lg">
                <Clock className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">میانگین هزینه</p>
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                  {formatCurrency(data.summary.average_shipping_cost)}
                </p>
              </div>
            </div>
          </div>

          <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-lg">
                <Clock className="h-5 w-5 text-gray-600 dark:text-gray-400" />
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">در انتظار</p>
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                  {formatWithThousands(data.summary.pending_shipments)}
                </p>
              </div>
            </div>
          </div>

          <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
                <Truck className="h-5 w-5 text-blue-600 dark:text-blue-400" />
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">ارسال شده</p>
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                  {formatWithThousands(data.summary.shipped_count)}
                </p>
              </div>
            </div>
          </div>

          <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-green-100 dark:bg-green-900 rounded-lg">
                <Package className="h-5 w-5 text-green-600 dark:text-green-400" />
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">تحویل داده شده</p>
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                  {formatWithThousands(data.summary.delivered_count)}
                </p>
              </div>
            </div>
          </div>

          <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-red-100 dark:bg-red-900 rounded-lg">
                <Package className="h-5 w-5 text-red-600 dark:text-red-400" />
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">لغو شده</p>
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                  {formatWithThousands(data.summary.cancelled_count)}
                </p>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Method Summaries */}
      {data?.method_summaries && data.method_summaries.length > 0 && (
        <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-6">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
            آمار هر روش ارسال
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {data.method_summaries.map((method) => (
              <div
                key={method.shipping_method_id}
                className="border border-gray-200 dark:border-gray-700 rounded-lg p-4"
              >
                <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                  {method.shipping_method || method.shipping_method_code}
                </h4>
                <div className="space-y-1 text-sm">
                  <div className="flex justify-between">
                    <span className="text-gray-600 dark:text-gray-400">تعداد ارسال:</span>
                    <span className="font-medium">{formatWithThousands(method.shipment_count)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600 dark:text-gray-400">مجموع درآمد:</span>
                    <span className="font-medium">{formatCurrency(method.total_revenue)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600 dark:text-gray-400">مجموع هزینه:</span>
                    <span className="font-medium">{formatCurrency(method.total_shipping_cost)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600 dark:text-gray-400">میانگین وزن:</span>
                    <span className="font-medium">{formatWeight(method.average_weight)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600 dark:text-gray-400">تحویل شده:</span>
                    <span className="font-medium text-green-600">{formatWithThousands(method.delivered_count)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600 dark:text-gray-400">لغو شده:</span>
                    <span className="font-medium text-red-600">{formatWithThousands(method.cancelled_count)}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Table */}
      {isLoading ? (
        <ReportSkeleton summaryCardCount={8} tableColumnCount={9} showMethodSummaries={true} />
      ) : error ? (
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
          <p className="text-red-600 dark:text-red-400">خطا در دریافت داده‌ها</p>
        </div>
      ) : (
        <>
          <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
            <Table columns={columns} data={tableData} loading={isLoading} />
          </div>

          {data && data.total > 0 && totalPages > 1 && (
            <div className="mt-4 flex justify-center">
              <Pagination
                currentPage={currentPage}
                totalPages={totalPages}
                onPageChange={handlePageChange}
                itemsPerPage={filters.limit}
                totalItems={data.total}
              />
            </div>
          )}

          {data && data.total === 0 && (
            <div className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8 text-center">
              <p className="text-gray-600 dark:text-gray-400">داده‌ای یافت نشد</p>
            </div>
          )}
        </>
      )}
    </PageContainer>
  );
};

export default ShipmentsByMethodReportPage;

