'use client'

import DateRangePicker from '@/components/RangeDatePicker'
import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
import { ProfitLossReport } from '@/types/services/analytic'
import { Button, Card, CardContent, Box } from '@mui/material'

interface ReportProfitLossContentProps {
  profitData: ProfitLossReport | undefined
  startDate: Date | null
  endDate: Date | null
  onStartDateChange: (date: Date | null) => void
  onEndDateChange: (date: Date | null) => void
}

// Utility function to format date for display
const formatDisplayDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('id-ID', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  })
}

const ReportProfitLossContent = ({
  profitData,
  startDate,
  endDate,
  onStartDateChange,
  onEndDateChange
}: ReportProfitLossContentProps) => {
  const handleExport = () => {
    // TODO: Implement export functionality
    console.log('Export data:', profitData)
  }

  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' />}
            className='max-sm:is-full'
            onClick={handleExport}
            disabled={!profitData}
          >
            Ekspor
          </Button>
          <DateRangePicker
            startDate={startDate}
            endDate={endDate}
            onStartDateChange={onStartDateChange}
            onEndDateChange={onEndDateChange}
          />
        </div>
      </div>
      <CardContent>
        {profitData ? (
          <>
            {/* Summary Section */}
            <ReportItemHeader
              title='Pendapatan'
              date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
            />
            <ReportItemSubheader title='Penjualan' />
            <ReportItem
              accountCode=''
              accountName='Revenue'
              amount={profitData.summary.total_revenue}
              onClick={() => {}}
            />

            <ReportItemFooter title='Total Pendapatan' amount={profitData.summary.total_revenue} />
            <ReportItemSubheader title='' />

            <ReportItemHeader
              title='Beban Pokok Penjualan'
              date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
            />
            <ReportItem
              accountCode=''
              accountName='Cost of Goods Sold'
              amount={profitData.summary.total_cost}
              onClick={() => {}}
            />
            <ReportItemFooter title='Total Beban Pokok Penjualan' amount={profitData.summary.total_cost} />
            <ReportItemSubheader title='' />

            <ReportItemHeader title='Laba Kotor' amount={profitData.summary.gross_profit} />
            <ReportItemSubheader title='' />

            {/* Daily Data Breakdown Section */}
            {profitData.data && profitData.data.length > 0 && (
              <>
                <ReportItemHeader
                  title='Rincian Data Harian'
                  date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
                />
                <ReportItemSubheader title='Breakdown per Hari' />

                {profitData.data.map((dailyData, index) => (
                  <div key={index} className='mb-4'>
                    <ReportItemSubheader title={`Data ${formatDisplayDate(dailyData.date)}`} />

                    <ReportItem
                      accountCode=''
                      accountName='Revenue Harian'
                      amount={dailyData.revenue}
                      onClick={() => {}}
                    />

                    <ReportItem accountCode='' accountName='Cost Harian' amount={dailyData.cost} onClick={() => {}} />

                    <ReportItem
                      accountCode=''
                      accountName='Gross Profit Harian'
                      amount={dailyData.gross_profit}
                      onClick={() => {}}
                    />

                    <ReportItem accountCode='' accountName='Tax Harian' amount={dailyData.tax} onClick={() => {}} />

                    <ReportItem
                      accountCode=''
                      accountName='Discount Harian'
                      amount={dailyData.discount}
                      onClick={() => {}}
                    />

                    <ReportItem
                      accountCode=''
                      accountName='Orders Harian'
                      amount={dailyData.orders}
                      onClick={() => {}}
                    />

                    <ReportItemFooter
                      title={`Net Profit ${formatDisplayDate(dailyData.date)}`}
                      amount={dailyData.net_profit}
                    />
                  </div>
                ))}

                <ReportItemSubheader title='' />
              </>
            )}

            {/* Operational Costs Section */}
            <ReportItemHeader
              title='Biaya Operasional'
              date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
            />
            <ReportItemSubheader title='Biaya Operasional' />

            <ReportItem accountCode='' accountName='Tax' amount={profitData.summary.total_tax} onClick={() => {}} />
            <ReportItem
              accountCode=''
              accountName='Discount'
              amount={profitData.summary.total_discount}
              onClick={() => {}}
            />

            <ReportItemFooter
              title='Total Biaya Operasional'
              amount={profitData.summary.total_tax + profitData.summary.total_discount}
            />
            <ReportItemSubheader title='' />

            <ReportItemHeader title='Laba Bersih' amount={profitData.summary.net_profit} />
          </>
        ) : (
          <Box display='flex' justifyContent='center' alignItems='center' minHeight={200}>
            <span>No data available</span>
          </Box>
        )}
      </CardContent>
    </Card>
  )
}

export default ReportProfitLossContent