'use client'

import DateRangePicker from '@/components/RangeDatePicker'
import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
import { ExcelExportSalesProductService } from '@/services/export/excel/ExcelExportSalesProductService'
import { PDFExportSalesProductService } from '@/services/export/pdf/PdfExportSalesProductSevice'
import { useProductSalesAnalytics } from '@/services/queries/analytics'
import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
import { Button, Card, CardContent, Menu, MenuItem } from '@mui/material'
import { useState } from 'react'

const ReportSalesPerProductContent = () => {
  const [startDate, setStartDate] = useState<Date | null>(new Date())
  const [endDate, setEndDate] = useState<Date | null>(new Date())
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

  const { data: products } = useProductSalesAnalytics({
    date_from: formatDateDDMMYYYY(startDate!),
    date_to: formatDateDDMMYYYY(endDate!)
  })

  const productSummary = {
    totalQuantitySold: products?.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
    totalRevenue: products?.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
    totalOrders: products?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
  }

  const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget)
  }

  const handleExportClose = () => {
    setAnchorEl(null)
  }

  const handleExportExcel = async () => {
    if (!products) {
      console.warn('No data available for export')
      return
    }

    try {
      const result = await ExcelExportSalesProductService.exportProductSalesToExcel(
        products,
        `Penjualan_Produk_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.xlsx`
      )

      if (result.success) {
        console.log(`Excel exported successfully: ${result.filename}`)
      } else {
        console.error('Export failed:', result.error)
      }
    } catch (error) {
      console.error('Export error:', error)
    }
  }

  const handleExportPDF = async () => {
    if (!products) {
      console.warn('No data available for export')
      return
    }

    try {
      const result = await PDFExportSalesProductService.exportProductSalesToPDF(
        products,
        `Laporan_Penjualan_Produk_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.pdf`
      )

      if (result.success) {
        console.log(`PDF exported successfully: ${result.filename}`)
      } else {
        console.error('Export failed:', result.error)
      }
    } catch (error) {
      console.error('Export error:', error)
    }
  }

  return (
    <Card>
      <div className='p-6 border-be'>
        <div className='flex items-center justify-end gap-2'>
          <Button
            color='secondary'
            variant='tonal'
            startIcon={<i className='tabler-upload' />}
            endIcon={<i className='tabler-chevron-down' />}
            className='max-sm:is-full'
            onClick={handleExportClick}
          >
            Ekspor
          </Button>
          <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
            <MenuItem
              onClick={() => {
                handleExportExcel()
                handleExportClose()
              }}
            >
              Export Excel
            </MenuItem>
            <MenuItem
              onClick={() => {
                handleExportPDF()
                handleExportClose()
              }}
            >
              Export PDF
            </MenuItem>
          </Menu>
          <DateRangePicker
            startDate={startDate}
            endDate={endDate}
            onStartDateChange={setStartDate}
            onEndDateChange={setEndDate}
          />
        </div>
      </div>
      <CardContent>
        <ReportItemHeader
          title='Ringkasan Item'
          date={`${products?.date_from.split('T')[0]} - ${products?.date_to.split('T')[0]}`}
        />
        <div className='bg-gray-50  border border-gray-200 overflow-visible'>
          <div className='overflow-x-auto'>
            <table className='w-full table-fixed' style={{ minWidth: '100%' }}>
              <colgroup>
                <col style={{ width: '40%' }} />
                <col style={{ width: '15%' }} />
                <col style={{ width: '15%' }} />
                <col style={{ width: '15%' }} />
                <col style={{ width: '15%' }} />
              </colgroup>
              <thead>
                <tr className='text-gray-800 border-b-2 border-gray-300'>
                  <th className='text-left p-3 font-semibold border-r border-gray-300'>Produk</th>
                  <th className='text-center p-3 font-semibold border-r border-gray-300'>Qty</th>
                  <th className='text-center p-3 font-semibold border-r border-gray-300'>Order</th>
                  <th className='text-right p-3 font-semibold border-r border-gray-300'>Pendapatan</th>
                  <th className='text-right p-3 font-semibold'>Rata Rata</th>
                </tr>
              </thead>
              <tbody>
                {(() => {
                  // Group products by category
                  const groupedProducts =
                    products?.data?.reduce(
                      (acc, item) => {
                        const categoryName = item.category_name || 'Tidak Berkategori'
                        if (!acc[categoryName]) {
                          acc[categoryName] = []
                        }
                        acc[categoryName].push(item)
                        return acc
                      },
                      {} as Record<string, any[]>
                    ) || {}

                  const rows: JSX.Element[] = []
                  let globalIndex = 0

                  // Sort categories alphabetically
                  Object.keys(groupedProducts)
                    .sort()
                    .forEach(categoryName => {
                      const categoryProducts = groupedProducts[categoryName]

                      // Category header row
                      rows.push(
                        <tr
                          key={`category-${categoryName}`}
                          className='bg-gray-100 border-b border-gray-300'
                          style={{ pageBreakInside: 'avoid' }}
                        >
                          <td
                            className='p-3 font-bold text-gray-900 border-r border-gray-300'
                            style={{ color: '#36175e' }}
                          >
                            {categoryName.toUpperCase()}
                          </td>
                          <td className='p-3 border-r border-gray-300'></td>
                          <td className='p-3 border-r border-gray-300'></td>
                          <td className='p-3 border-r border-gray-300'></td>
                          <td className='p-3'></td>
                        </tr>
                      )

                      // Product rows for this category
                      categoryProducts.forEach((item, index) => {
                        globalIndex++
                        rows.push(
                          <tr
                            key={`product-${item.product_name}-${index}`}
                            className={`${globalIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'} border-b border-gray-200`}
                            style={{ pageBreakInside: 'avoid' }}
                          >
                            <td
                              className='p-3 pl-6 font-medium text-gray-800 border-r border-gray-200'
                              style={{ wordWrap: 'break-word' }}
                            >
                              {item.product_name}
                            </td>
                            <td className='p-3 text-center text-gray-700 border-r border-gray-200'>
                              {item.quantity_sold}
                            </td>
                            <td className='p-3 text-center text-gray-700 border-r border-gray-200'>
                              {item.order_count ?? 0}
                            </td>
                            <td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-200'>
                              {formatCurrency(item.revenue)}
                            </td>
                            <td className='p-3 text-right font-medium text-gray-800'>
                              {formatCurrency(item.average_price)}
                            </td>
                          </tr>
                        )
                      })

                      // Category subtotal row
                      const categoryTotalQty = categoryProducts.reduce(
                        (sum, item) => sum + (item.quantity_sold || 0),
                        0
                      )
                      const categoryTotalOrders = categoryProducts.reduce(
                        (sum, item) => sum + (item.order_count || 0),
                        0
                      )
                      const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)

                      rows.push(
                        <tr
                          key={`subtotal-${categoryName}`}
                          className='bg-gray-200 border-b-2 border-gray-400'
                          style={{ pageBreakInside: 'avoid' }}
                        >
                          <td className='p-3 pl-6 font-semibold text-gray-800 border-r border-gray-400'>
                            Subtotal {categoryName}
                          </td>
                          <td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
                            {categoryTotalQty}
                          </td>
                          <td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
                            {categoryTotalOrders}
                          </td>
                          <td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-400'>
                            {formatCurrency(categoryTotalRevenue)}
                          </td>
                          <td className='p-3'></td>
                        </tr>
                      )
                    })

                  return rows
                })()}
              </tbody>
              <tfoot>
                <tr className='text-gray-800 border-t-2 border-gray-300' style={{ pageBreakInside: 'avoid' }}>
                  <td className='p-3 font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td>
                  <td className='p-3 text-center font-bold border-r border-gray-300'>
                    {productSummary.totalQuantitySold ?? 0}
                  </td>
                  <td className='p-3 text-center font-bold border-r border-gray-300'>
                    {productSummary.totalOrders ?? 0}
                  </td>
                  <td className='p-3 text-right font-bold border-r border-gray-300'>
                    {formatCurrency(productSummary.totalRevenue ?? 0)}
                  </td>
                  <td className='p-3'></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
        <ReportItemSubheader title='' />
      </CardContent>
    </Card>
  )
}

export default ReportSalesPerProductContent
