'use client'

import React, { useState } from 'react'
import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
import { formatDateDDMMYYYY, formatForInputDate, formatShortCurrency } from '../../../../../../utils/transform'
import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
import { TextField, Typography, useTheme } from '@mui/material'
import Loading from '../../../../../../components/layout/shared/Loading'

const DashboardProfitloss = () => {
  const theme = useTheme()

  const today = new Date()
  const monthAgo = new Date()
  monthAgo.setDate(today.getDate() - 30)

  const [filter, setFilter] = useState({
    date_from: formatDateDDMMYYYY(monthAgo),
    date_to: formatDateDDMMYYYY(today)
  })

  // Sample data - replace with your actual data
  const { data: profitData, isLoading } = useProfitLossAnalytics({
    date_from: filter.date_from,
    date_to: filter.date_to
  })

  const formatCurrency = (amount: any) => {
    return new Intl.NumberFormat('id-ID', {
      style: 'currency',
      currency: 'IDR',
      minimumFractionDigits: 0
    }).format(amount)
  }

  const formatPercentage = (value: any) => {
    return `${value.toFixed(2)}%`
  }

  const formatDate = (dateString: any) => {
    return new Date(dateString).toLocaleDateString('id-ID', {
      day: 'numeric',
      month: 'short',
      year: 'numeric'
    })
  }

  const getProfitabilityColor = (margin: any) => {
    if (margin > 50) return 'text-green-600 bg-green-100'
    if (margin > 0) return 'text-yellow-600 bg-yellow-100'
    return 'text-red-600 bg-red-100'
  }

  function formatMetricName(metric: string): string {
    const nameMap: { [key: string]: string } = {
      revenue: 'Revenue',
      net_profit: 'Net Profit'
    }

    return nameMap[metric] || metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
  }

  const metrics = ['revenue', 'net_profit']

  const transformMultipleData = (data: ProfitLossReport) => {
    return [
      {
        type: 'profits',
        avatarIcon: 'tabler-currency-dollar',
        date: data.data.map((d: DailyData) => formatDate(d.date)),
        series: metrics.map(metric => ({
          name: formatMetricName(metric as string),
          data: data.data.map((item: any) => item[metric] as number)
        }))
      }
    ]
  }

  const MetricCard = ({
    iconClass,
    title,
    value,
    subtitle,
    bgColor = 'bg-blue-500',
    isNegative = false,
    isCurrency = false
  }: 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 mb-1 ${isNegative ? 'text-red-600' : 'text-gray-900'}`}>
            {isCurrency ? 'Rp ' + value : value}
          </p>
          {subtitle && <p className='text-sm text-gray-500'>{subtitle}</p>}
        </div>
        <div className={`px-4 py-3 rounded-full ${bgColor} bg-opacity-10`}>
          <i className={`${iconClass} text-[32px] ${bgColor.replace('bg-', 'text-')}`}></i>
        </div>
      </div>
    </div>
  )

  return (
    <>
      <div>
        {/* Header */}
        <div className='mb-8 flex gap-4 items-center justify-between'>
          <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
            Profit Analysis Dashboard
          </Typography>
          <div className='flex items-center gap-4'>
            <TextField
              type='date'
              value={formatForInputDate(profitData?.date_from || new Date())}
              onChange={e => {
                setFilter({
                  ...filter,
                  date_from: formatDateDDMMYYYY(new Date(e.target.value))
                })
              }}
              size='small'
              sx={{
                '& .MuiOutlinedInput-root': {
                  '&.Mui-focused fieldset': {
                    borderColor: 'primary.main'
                  },
                  '& fieldset': {
                    borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
                  }
                }
              }}
            />
            <Typography>-</Typography>
            <TextField
              type='date'
              value={
                profitData?.date_to
                  ? new Date(profitData?.date_to).toISOString().split('T')[0]
                  : new Date().toISOString().split('T')[0]
              }
              onChange={e => {}}
              size='small'
              sx={{
                '& .MuiOutlinedInput-root': {
                  '&.Mui-focused fieldset': {
                    borderColor: 'primary.main'
                  },
                  '& fieldset': {
                    borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
                  }
                }
              }}
            />
          </div>
        </div>

        {profitData ? (
          <>
            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
              <MetricCard
                iconClass='tabler-currency-dollar'
                title='Total Revenue'
                value={formatShortCurrency(profitData.summary.total_revenue)}
                bgColor='bg-green-500'
                isCurrency={true}
              />
              <MetricCard
                iconClass='tabler-receipt'
                title='Total Cost'
                value={formatShortCurrency(profitData.summary.total_cost)}
                bgColor='bg-red-500'
                isCurrency={true}
              />
              <MetricCard
                iconClass='tabler-trending-up'
                title='Gross Profit'
                value={formatShortCurrency(profitData.summary.gross_profit)}
                subtitle={`Margin: ${formatPercentage(profitData.summary.gross_profit_margin)}`}
                bgColor='bg-blue-500'
                isNegative={profitData.summary.gross_profit < 0}
                isCurrency={true}
              />
              <MetricCard
                iconClass='tabler-percentage'
                title='Profitability Ratio'
                value={formatPercentage(profitData.summary.profitability_ratio)}
                subtitle={`Avg Profit: ${formatShortCurrency(profitData.summary.average_profit)}`}
                bgColor='bg-purple-500'
              />
            </div>

            {/* Additional Summary Metrics */}
            <div className='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
              <div className='bg-white rounded-lg shadow-md p-6'>
                <div className='flex items-center mb-4'>
                  <i className='tabler-wallet text-[24px] text-green-600 mr-2'></i>
                  <h3 className='text-lg font-semibold text-gray-900'>Net Profit</h3>
                </div>
                <p className='text-3xl font-bold text-green-600 mb-2'>
                  Rp {formatShortCurrency(profitData.summary.net_profit)}
                </p>
                <p className='text-sm text-gray-600'>
                  Margin: {formatPercentage(profitData.summary.net_profit_margin)}
                </p>
              </div>
              <div className='bg-white rounded-lg shadow-md p-6'>
                <div className='flex items-center mb-4'>
                  <i className='tabler-shopping-cart text-[24px] text-blue-600 mr-2'></i>
                  <h3 className='text-lg font-semibold text-gray-900'>Total Orders</h3>
                </div>
                <p className='text-3xl font-bold text-blue-600'>{profitData.summary.total_orders}</p>
              </div>
              <div className='bg-white rounded-lg shadow-md p-6'>
                <div className='flex items-center mb-4'>
                  <i className='tabler-discount text-[24px] text-orange-600 mr-2'></i>
                  <h3 className='text-lg font-semibold text-gray-900'>Tax & Discount</h3>
                </div>
                <p className='text-xl font-bold text-orange-600 mb-1'>
                  Rp {formatShortCurrency(profitData.summary.total_tax + profitData.summary.total_discount)}
                </p>
                <p className='text-sm text-gray-600'>
                  Tax: {formatShortCurrency(profitData.summary.total_tax)} | Discount:{' '}
                  {formatShortCurrency(profitData.summary.total_discount)}
                </p>
              </div>
            </div>

            {/* Profit Chart */}
            <div className='mb-8'>
              <MultipleSeries data={transformMultipleData(profitData)} />
            </div>

            <div className='grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8'>
              {/* Daily Breakdown */}
              <div className='bg-white rounded-lg shadow-md'>
                <div className='p-6'>
                  <div className='flex items-center mb-6'>
                    <i className='tabler-calendar text-[24px] text-purple-500 mr-2'></i>
                    <h2 className='text-xl font-semibold text-gray-900'>Daily Breakdown</h2>
                  </div>
                  <div className='overflow-x-auto'>
                    <table className='min-w-full'>
                      <thead>
                        <tr className='bg-gray-50'>
                          <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Date</th>
                          <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
                          <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
                          <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
                          <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
                          <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Orders</th>
                        </tr>
                      </thead>
                      <tbody className='bg-white divide-y divide-gray-200'>
                        {profitData.data.map((day, index) => (
                          <tr key={index} className='hover:bg-gray-50'>
                            <td className='px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900'>
                              {formatDate(day.date)}
                            </td>
                            <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
                              {formatCurrency(day.revenue)}
                            </td>
                            <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
                              {formatCurrency(day.cost)}
                            </td>
                            <td
                              className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
                                day.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
                              }`}
                            >
                              {formatCurrency(day.gross_profit)}
                            </td>
                            <td className='px-4 py-4 whitespace-nowrap text-right'>
                              <span
                                className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
                                  day.gross_profit_margin
                                )}`}
                              >
                                {formatPercentage(day.gross_profit_margin)}
                              </span>
                            </td>
                            <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
                              {day.orders}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

              {/* Top Performing Products */}
              <div className='bg-white rounded-lg shadow-md'>
                <div className='p-6'>
                  <div className='flex items-center mb-6'>
                    <i className='tabler-trophy text-[24px] text-gold-500 mr-2'></i>
                    <h2 className='text-xl font-semibold text-gray-900'>Top Performers</h2>
                  </div>
                  <div className='space-y-4'>
                    {profitData.product_data
                      .sort((a, b) => b.gross_profit - a.gross_profit)
                      .slice(0, 5)
                      .map((product, index) => (
                        <div
                          key={product.product_id}
                          className='flex items-center justify-between p-4 bg-gray-50 rounded-lg'
                        >
                          <div className='flex items-center'>
                            <span
                              className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold mr-3 ${
                                index === 0
                                  ? 'bg-yellow-500'
                                  : index === 1
                                    ? 'bg-gray-400'
                                    : index === 2
                                      ? 'bg-orange-500'
                                      : 'bg-blue-500'
                              }`}
                            >
                              {index + 1}
                            </span>
                            <div>
                              <h3 className='font-medium text-gray-900'>{product.product_name}</h3>
                              <p className='text-sm text-gray-600'>{product.category_name}</p>
                            </div>
                          </div>
                          <div className='text-right'>
                            <p className={`font-bold ${product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                              {formatCurrency(product.gross_profit)}
                            </p>
                            <p className='text-xs text-gray-500'>{formatPercentage(product.gross_profit_margin)}</p>
                          </div>
                        </div>
                      ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Product Analysis Table */}
            <div className='bg-white rounded-lg shadow-md'>
              <div className='p-6'>
                <div className='flex items-center mb-6'>
                  <i className='tabler-package text-[24px] text-green-500 mr-2'></i>
                  <h2 className='text-xl font-semibold text-gray-900'>Product Analysis</h2>
                </div>
                <div className='overflow-x-auto'>
                  <table className='min-w-full'>
                    <thead>
                      <tr className='bg-gray-50'>
                        <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Product</th>
                        <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Category</th>
                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Qty</th>
                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Per Unit</th>
                      </tr>
                    </thead>
                    <tbody className='bg-white divide-y divide-gray-200'>
                      {profitData.product_data
                        .sort((a, b) => b.gross_profit - a.gross_profit)
                        .map(product => (
                          <tr key={product.product_id} className='hover:bg-gray-50'>
                            <td className='px-4 py-4 whitespace-nowrap'>
                              <div className='text-sm font-medium text-gray-900'>{product.product_name}</div>
                            </td>
                            <td className='px-4 py-4 whitespace-nowrap'>
                              <span className='inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800'>
                                {product.category_name}
                              </span>
                            </td>
                            <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
                              {product.quantity_sold}
                            </td>
                            <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
                              {formatCurrency(product.revenue)}
                            </td>
                            <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
                              {formatCurrency(product.cost)}
                            </td>
                            <td
                              className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
                                product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
                              }`}
                            >
                              {formatCurrency(product.gross_profit)}
                            </td>
                            <td className='px-4 py-4 whitespace-nowrap text-right'>
                              <span
                                className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
                                  product.gross_profit_margin
                                )}`}
                              >
                                {formatPercentage(product.gross_profit_margin)}
                              </span>
                            </td>
                            <td
                              className={`px-4 py-4 whitespace-nowrap text-right text-sm ${
                                product.profit_per_unit >= 0 ? 'text-green-600' : 'text-red-600'
                              }`}
                            >
                              {formatCurrency(product.profit_per_unit)}
                            </td>
                          </tr>
                        ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </>
        ) : (
          <Loading />
        )}
      </div>
    </>
  )
}

export default DashboardProfitloss