'use client'

import DateRangePicker from '@/components/RangeDatePicker'
import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
import { useSalesAnalytics } from '@/services/queries/analytics'
import { formatCurrency, formatDate, formatDateDDMMYYYY } from '@/utils/transform'
import { Button, Card, CardContent } from '@mui/material'
import { useState } from 'react'
import ReportSalesOrderCard from './ReportSalesOrderCard'

const ReportSalesOrderContent = () => {
  const [startDate, setStartDate] = useState<Date | null>(new Date())
  const [endDate, setEndDate] = useState<Date | null>(new Date())

  const { data: sales } = useSalesAnalytics({
    date_from: formatDateDDMMYYYY(startDate!),
    date_to: formatDateDDMMYYYY(endDate!)
  })

  return (
    <>
      <ReportSalesOrderCard sales={sales} />

      <Card className='mt-5'>
        <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' />}
              className='max-sm:is-full'
              // onClick={handleExportPDF}
            >
              Ekspor
            </Button>
            <DateRangePicker
              startDate={startDate}
              endDate={endDate}
              onStartDateChange={setStartDate}
              onEndDateChange={setEndDate}
            />
          </div>
        </div>
        <CardContent>
          <ReportItemHeader
            title='Pesanan'
            date={`${sales?.date_from.split('T')[0]} - ${sales?.date_to.split('T')[0]}`}
          />
          <div className='bg-gray-50 border border-gray-200 overflow-hidden'>
            <table className='w-full'>
              <thead>
                <tr className='text-gray-800 border-b-2 border-gray-300'>
                  <th className='text-left p-3 font-semibold'>Date</th>
                  <th className='text-center p-3 font-semibold'>Penjualan</th>
                  <th className='text-center p-3 font-semibold'>Pesanan</th>
                  <th className='text-right p-3 font-semibold'>Qty</th>
                  <th className='text-right p-3 font-semibold'>Pajak</th>
                  <th className='text-right p-3 font-semibold'>Diskon</th>
                  <th className='text-right p-3 font-semibold'>Pendapatan</th>
                </tr>
              </thead>
              <tbody>
                {sales?.data?.map((c, index) => (
                  <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
                    <td className='p-3 font-medium text-gray-800'>{formatDate(c.date)}</td>
                    <td className='p-3 text-center text-gray-700'>{formatCurrency(c.sales)}</td>
                    <td className='p-3 text-center text-gray-700'>{c.orders}</td>
                    <td className='p-3 text-center text-gray-700'>{c.items}</td>
                    <td className='p-3 text-center text-gray-700'>{formatCurrency(c.tax)}</td>
                    <td className='p-3 text-center text-gray-700'>{formatCurrency(c.discount)}</td>
                    <td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
                      {formatCurrency(c.net_sales)}
                    </td>
                  </tr>
                )) || []}
              </tbody>
            </table>
          </div>
          <ReportItemSubheader title='' />
        </CardContent>
      </Card>
    </>
  )
}

export default ReportSalesOrderContent
