pos-dashboard-v2/src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx

'use client'

import Logo from '@/@core/svg/Logo'
import { useProductSalesAnalytics, useProfitLossAnalytics, useSalesAnalytics } from '@/services/queries/analytics'
import { useOutletById } from '@/services/queries/outlets'
import { formatCurrency, formatDate, formatDateDDMMYYYY, formatDatetime } from '@/utils/transform'
import React, { useEffect, useRef, useState } from 'react'

const DailyPOSReport = () => {
  const reportRef = useRef<HTMLElement | null>(null)

  const [now, setNow] = useState(new Date())

  const { data: outlet } = useOutletById()
  const { data: sales } = useSalesAnalytics({
    date_from: formatDateDDMMYYYY(now),
    date_to: formatDateDDMMYYYY(now)
  })
  const { data: profitLoss } = useProfitLossAnalytics({
    date_from: formatDateDDMMYYYY(now),
    date_to: formatDateDDMMYYYY(now)
  })
  const { data: products } = useProductSalesAnalytics({
    date_from: formatDateDDMMYYYY(now),
    date_to: formatDateDDMMYYYY(now)
  })

  const user = (() => {
    try {
      return JSON.parse(localStorage.getItem('user') || '{}')
    } catch {
      return {}
    }
  })()

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

  useEffect(() => {
    setNow(new Date())
  }, [])

  const calculateCOGS = (totalRevenue: number, grossProfit: number) => {
    return totalRevenue - grossProfit
  }

  const calculateAveragePerTransaction = (totalRevenue: number, totalOrders: number) => {
    if (totalOrders === 0) return 0
    return totalRevenue / totalOrders
  }

  const generatePDF = async () => {
    const reportElement = reportRef.current

    try {
      // Import jsPDF dan html2canvas
      const jsPDF = (await import('jspdf')).default
      const html2canvas = (await import('html2canvas')).default

      // Optimized canvas capture dengan scale lebih rendah
      const canvas = await html2canvas(reportElement!, {
        scale: 1.5, // Reduced from 2 to 1.5
        useCORS: true,
        allowTaint: true,
        backgroundColor: '#ffffff',
        logging: false, // Disable logging for performance
        removeContainer: true, // Clean up after capture
        imageTimeout: 0, // No timeout for image loading
        height: reportElement!.scrollHeight,
        width: reportElement!.scrollWidth
      })

      // Compress canvas using JPEG with quality setting
      const imgData = canvas.toDataURL('image/jpeg', 0.85) // JPEG with 85% quality instead of PNG

      // Create PDF with compression
      const pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'mm',
        format: 'a4',
        compress: true // Enable built-in compression
      })

      const imgWidth = 210
      const pageHeight = 295
      const imgHeight = (canvas.height * imgWidth) / canvas.width
      let heightLeft = imgHeight
      let position = 0

      // Add first page with compressed image
      pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST') // Use FAST compression
      heightLeft -= pageHeight

      // Handle multiple pages if needed
      while (heightLeft >= 0) {
        position = heightLeft - imgHeight
        pdf.addPage()
        pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST')
        heightLeft -= pageHeight
      }

      // Additional compression options
      pdf.setProperties({
        title: `Laporan Transaksi Harian`,
        subject: 'Daily Transaction Report',
        author: 'Apskel POS System',
        creator: 'Apskel'
      })

      // Save with optimized settings
      pdf.save(`laporan-transaksi-harian.pdf`, {
        returnPromise: true
      })

      // Clean up canvas to free memory
      canvas.width = canvas.height = 0
    } catch (error) {
      console.error('Error generating PDF:', error)
      alert('Terjadi kesalahan saat membuat PDF. Pastikan jsPDF dan html2canvas sudah terinstall.')
    }
  }

  return (
    <div className='min-h-screen'>
      {/* Control Panel */}
      <div className='max-w-4xl mx-auto mb-6'>
        <div className='bg-white rounded-lg p-4 border border-gray-200'>
          <div className='flex items-center justify-between'>
            <h1 className='text-2xl font-bold text-gray-800'>Generator Laporan Transaksi Harian</h1>
            <button
              onClick={generatePDF}
              className='flex items-center gap-2 px-4 py-2 text-white rounded-lg hover:opacity-90 transition-opacity'
              style={{ backgroundColor: '#36175e' }}
            >
              Download PDF
            </button>
          </div>
          <p className='text-gray-600 mt-2'>Klik tombol download untuk mengeksport laporan ke PDF</p>
        </div>
      </div>

      {/* Report Template */}
      <div ref={reportRef} className='max-w-4xl mx-auto bg-white min-h-[297mm]' style={{ width: '210mm' }}>
        {/* Header */}
        <div className='p-8 pb-6 border-b-2' style={{ borderColor: '#36175e' }}>
          <div className='flex items-start justify-between'>
            <div className='flex items-center gap-4'>
              <Logo />
              <div>
                <h1 className='text-3xl font-bold' style={{ color: '#36175e' }}>
                  Apskel
                </h1>
                <h2 className='text-xl font-semibold text-gray-800 mt-1'>{outlet?.name}</h2>
                <p className='text-gray-600 text-sm mt-1'>{outlet?.address}</p>
              </div>
            </div>
            <div className='text-right'>
              <h3 className='text-2xl font-bold text-gray-800'>Laporan Transaksi Harian</h3>
              <div className='flex items-center justify-end gap-2 mt-2'>
                <span className='text-sm text-gray-600'>Laporan Operasional</span>
              </div>
            </div>
          </div>
        </div>

        {/* Information Section */}
        <div className='p-8 pb-6'>
          <div className='grid grid-cols-2 gap-6'>
            <div className='space-y-3'>
              <div>
                <span className='text-sm font-medium text-gray-500'>Tanggal Laporan</span>
                <p className='text-lg font-semibold text-gray-800'>{formatDate(now)}</p>
              </div>
              <div>
                <span className='text-sm font-medium text-gray-500'>Periode Operasional</span>
                <p className='text-lg font-semibold text-gray-800'>
                  {formatDateDDMMYYYY(now)} / {formatDateDDMMYYYY(now)}
                </p>
              </div>
            </div>
            <div className='space-y-3'>
              <div>
                <span className='text-sm font-medium text-gray-500'>Dicetak Oleh</span>
                <p className='text-lg font-semibold text-gray-800'>{user.name}</p>
              </div>
              <div>
                <span className='text-sm font-medium text-gray-500'>Waktu Cetak</span>
                <p className='text-lg font-semibold text-gray-800'>{formatDatetime(now)}</p>
              </div>
            </div>
          </div>
        </div>

        {/* Performance Summary */}
        <div className='px-8 pb-8'>
          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
            1. Ringkasan Kinerja
          </h3>

          <div className='grid grid-cols-3 gap-4 mb-6'>
            <div className='bg-gray-50 p-4 rounded-lg border border-gray-200'>
              <p className='text-sm text-gray-600 mb-1'>Total Transaksi</p>
              <p className='text-2xl font-bold text-gray-800'>{sales?.summary.total_orders}</p>
            </div>
            <div className='bg-gray-50 p-4 rounded-lg border border-gray-200'>
              <p className='text-sm text-gray-600 mb-1'>Item Terjual</p>
              <p className='text-2xl font-bold text-gray-800'>{sales?.summary.total_items}</p>
            </div>
            <div className='bg-gray-50 p-4 rounded-lg border border-gray-200'>
              <p className='text-sm text-gray-600 mb-1'>Margin Laba Kotor</p>
              <p className='text-2xl font-bold text-gray-800'>{profitLoss?.summary.gross_profit_margin.toFixed(2)}%</p>
            </div>
          </div>

          <div className='grid grid-cols-2 gap-6'>
            <div className='space-y-4'>
              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
                <span className='text-gray-700'>Pendapatan Kotor</span>
                <span className='font-semibold text-gray-800'>
                  {formatCurrency(profitLoss?.summary.gross_profit ?? 0)}
                </span>
              </div>
              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
                <span className='text-gray-700'>Total Diskon</span>
                <span className='font-semibold text-red-600'>
                  -{formatCurrency(profitLoss?.summary.total_discount ?? 0)}
                </span>
              </div>
              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
                <span className='text-gray-700'>Pajak</span>
                <span className='font-semibold text-gray-800'>
                  {formatCurrency(profitLoss?.summary.total_tax ?? 0)}
                </span>
              </div>
              <div className='flex justify-between items-center py-2 border-b-2 border-gray-300'>
                <span className='text-lg font-semibold text-gray-800'>Pendapatan Bersih</span>
                <span className='text-lg font-bold' style={{ color: '#36175e' }}>
                  {formatCurrency(profitLoss?.summary.net_profit ?? 0)}
                </span>
              </div>
            </div>
            <div className='space-y-4'>
              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
                <span className='text-gray-700'>HPP (COGS)</span>
                <span
                  className={`font-semibold ${
                    calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0) < 0
                      ? 'text-red-600'
                      : 'text-gray-800'
                  }`}
                >
                  {formatCurrency(
                    calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0)
                  )}
                </span>
              </div>
              <div className='flex justify-between items-center py-2 border-b-2 border-gray-300'>
                <span className='text-lg font-semibold text-gray-800'>Laba Kotor</span>
                <span className='text-lg font-bold' style={{ color: '#36175e' }}>
                  {formatCurrency(profitLoss?.summary.gross_profit ?? 0)}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Transaction Summary */}
        <div className='px-8 pb-8'>
          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
            2. Ringkasan Transaksi
          </h3>

          <div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
            <table className='w-full'>
              <thead>
                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
                  <th className='text-left p-3 font-semibold'>Produk</th>
                  <th className='text-left p-3 font-semibold'>Kategori</th>
                  <th className='text-center p-3 font-semibold'>Qty</th>
                  <th className='text-right p-3 font-semibold'>Order</th>
                  <th className='text-right p-3 font-semibold'>Pendapatan</th>
                  <th className='text-right p-3 font-semibold'>Rata Rata</th>
                </tr>
              </thead>
              <tbody>
                {products?.data.map((item, index) => (
                  <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
                    <td className='p-3 font-medium text-gray-800'>{item.product_name}</td>
                    <td className='p-3 font-medium text-gray-800'>{item.category_name}</td>
                    <td className='p-3 text-center text-gray-700'>{item.quantity_sold}</td>
                    <td className='p-3 text-right text-gray-700'>{item.order_count}</td>
                    <td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(item.revenue)}</td>
                    <td className='p-3 text-right font-medium text-gray-800'>{formatCurrency(item.average_price)}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
                  <td className='p-3 font-bold'>TOTAL</td>
                  <td className='p-3 text-center'></td>
                  <td className='p-3 font-bold'>{productSummary.totalQuantitySold}</td>
                  <td className='p-3 text-right font-bold'>{productSummary.totalOrders}</td>
                  <td className='p-3 text-right font-bold'>{formatCurrency(productSummary.totalRevenue ?? 0)}</td>
                  <td className='p-3 text-right font-bold'></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>

        {/* Financial Summary */}
        <div className='px-8 pb-8'>
          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
            3. Ringkasan Finansial
          </h3>

          <div className='grid grid-cols-2 gap-8'>
            <div className='bg-gray-50 p-6 rounded-lg border border-gray-200'>
              <h4 className='font-semibold text-gray-800 mb-4'>Pendapatan</h4>
              <div className='space-y-3'>
                <div className='flex justify-between'>
                  <span className='text-gray-600'>Penjualan Kotor</span>
                  <span className='font-medium' style={{ color: '#36175e' }}>
                    {formatCurrency(sales?.summary.total_sales ?? 0)}
                  </span>
                </div>
                <div className='flex justify-between'>
                  <span className='text-gray-600'>Diskon</span>
                  <span className='font-medium text-red-600'>
                    -{formatCurrency(sales?.summary.total_discount ?? 0)}
                  </span>
                </div>
                <div className='flex justify-between border-t pt-3'>
                  <span className='font-semibold text-gray-600'>Net Sales</span>
                  <span className='font-bold' style={{ color: '#36175e' }}>
                    {formatCurrency(sales?.summary.net_sales ?? 0)}
                  </span>
                </div>
              </div>
            </div>

            <div className='bg-gray-50 p-6 rounded-lg border border-gray-200'>
              <h4 className='font-semibold text-gray-800 mb-4'>Profitabilitas</h4>
              <div className='space-y-3'>
                <div className='flex justify-between'>
                  <span className='text-gray-600'>Laba Kotor</span>
                  <span className='font-medium' style={{ color: '#36175e' }}>
                    {formatCurrency(profitLoss?.summary.gross_profit ?? 0)}
                  </span>
                </div>
                <div className='flex justify-between'>
                  <span className='text-gray-600'>Margin Laba</span>
                  <span className='font-medium' style={{ color: '#36175e' }}>
                    {profitLoss?.summary.net_profit_margin.toFixed(2) ?? 0}%
                  </span>
                </div>
                <div className='flex justify-between border-t pt-3'>
                  <span className='font-semibold text-gray-600'>HPP</span>
                  <span className='font-bold text-red-600'>
                    {formatCurrency(
                      calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0)
                    )}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div
            className='mt-8 p-6 rounded-lg border-2'
            style={{ borderColor: '#36175e', backgroundColor: 'rgba(54, 23, 94, 0.05)' }}
          >
            <div className='grid grid-cols-3 gap-6 text-center'>
              <div>
                <p className='text-sm text-gray-600 mb-1'>Rata-rata per Transaksi</p>
                <p className='text-xl font-bold' style={{ color: '#36175e' }}>
                  {formatCurrency(
                    calculateAveragePerTransaction(sales?.summary.net_sales ?? 0, sales?.summary.total_orders ?? 0)
                  )}
                </p>
              </div>
              <div>
                <p className='text-sm text-gray-600 mb-1'>Item per Transaksi</p>
                <p className='text-xl font-bold' style={{ color: '#36175e' }}>
                  {Math.round(((sales?.summary.total_items ?? 0) / (sales?.summary.total_orders ?? 0)) * 10) / 10}
                </p>
              </div>
              <div>
                <p className='text-sm text-gray-600 mb-1'>Efisiensi Operasional</p>
                <p className='text-xl font-bold' style={{ color: '#36175e' }}>
                  {Math.round(profitLoss?.summary.profitability_ratio ?? 0)}%
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className='px-8 py-6 border-t-2 border-gray-200 mt-8'>
          <div className='flex justify-between items-center text-sm text-gray-600'>
            <p>© 2025 Apskel - Sistem POS Terpadu</p>
            <p></p>
            <p>Dicetak pada: {now.toLocaleDateString('id-ID')}</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default DailyPOSReport