'use client'

import React from 'react'
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
import Loading from '../../../../../../components/layout/shared/Loading'
import { formatCurrency, formatDate, formatShortCurrency } from '../../../../../../utils/transform'
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'

const DashboardOverview = () => {
  // Sample data - replace with your actual data
  const { data: salesData, isLoading } = useDashboardAnalytics()

  if (isLoading) return <Loading />

  const MetricCard = ({ iconClass, title, value, subtitle, bgColor = 'bg-blue-500' }: any) => (
    <div className='bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6'>
      <div className='flex items-center justify-between'>
        <div className='flex-1'>
          <h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
          <p className='text-2xl font-bold text-gray-900 mb-1'>{value}</p>
          {subtitle && <p className='text-sm text-gray-500'>{subtitle}</p>}
        </div>
        <div className={`p-3 rounded-full ${bgColor} bg-opacity-10`}>
          <i className={`${iconClass} text-[32px] ${bgColor.replace('bg-', 'text-')}`}></i>
        </div>
      </div>
    </div>
  )

  const ProgressBar = ({ percentage, color = 'bg-blue-500' }: any) => (
    <div className='w-full bg-gray-200 rounded-full h-2'>
      <div
        className={`${color} h-2 rounded-full transition-all duration-300`}
        style={{ width: `${percentage}%` }}
      ></div>
    </div>
  )

  return (
    <>
      {salesData && (
        <div>
          {/* Header */}
          {/* <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Sales Dashboard</h1>
          <p className="text-gray-600">
            {formatDate(salesData.date_from)} - {formatDate(salesData.date_to)}
          </p>
        </div> */}

          {/* Overview Metrics */}
          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
            <MetricCard
              iconClass='tabler-cash'
              title='Total Sales'
              value={formatShortCurrency(salesData.overview.total_sales)}
              bgColor='bg-green-500'
            />
            <MetricCard
              iconClass='tabler-shopping-cart'
              title='Total Orders'
              value={salesData.overview.total_orders.toLocaleString()}
              subtitle={`${salesData.overview.voided_orders} voided, ${salesData.overview.refunded_orders} refunded`}
              bgColor='bg-blue-500'
            />
            <MetricCard
              iconClass='tabler-trending-up'
              title='Average Order Value'
              value={formatShortCurrency(salesData.overview.average_order_value)}
              bgColor='bg-purple-500'
            />
            <MetricCard
              iconClass='tabler-users'
              title='Total Customers'
              value={salesData.overview.total_customers || 'N/A'}
              bgColor='bg-orange-500'
            />
          </div>

          {/* Additional Metrics */}
          <div className='grid grid-cols-1 md:grid-cols-2 gap-6 mb-8'>
            <div className='bg-white rounded-lg shadow-md p-6'>
              <div className='flex items-center mb-4'>
                <i className='tabler-x text-[24px] text-red-500 mr-2'></i>
                <h3 className='text-lg font-semibold text-gray-900'>Voided Orders</h3>
              </div>
              <p className='text-3xl font-bold text-red-600'>{salesData.overview.voided_orders}</p>
            </div>
            <div className='bg-white rounded-lg shadow-md p-6'>
              <div className='flex items-center mb-4'>
                <i className='tabler-refresh text-[24px] text-yellow-500 mr-2'></i>
                <h3 className='text-lg font-semibold text-gray-900'>Refunded Orders</h3>
              </div>
              <p className='text-3xl font-bold text-yellow-600'>{salesData.overview.refunded_orders}</p>
            </div>
          </div>

          <div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8'>
            {/* Top Products */}
            <ProductSales title='Top Products' productData={salesData.top_products} />

            {/* Payment Methods */}
            <PaymentMethodReport payments={salesData.payment_methods} />
          </div>

          {/* Recent Sales */}
          <OrdersReport title='Recent Sales' orderData={salesData.recent_sales} />
        </div>
      )}
    </>
  )
}

export default DashboardOverview