import Grid from '@mui/material/Grid2'
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
import { ProfitLossReport } from '@/types/services/analytic'

// Utility functions
const formatIDR = (amount: number) => {
  return new Intl.NumberFormat('id-ID', {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(amount)
}

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

interface ReportProfitLossCardProps {
  profitData: ProfitLossReport | undefined
}

const ReportProfitLossCard = ({ profitData }: ReportProfitLossCardProps) => {
  if (!profitData) {
    return null // Will be handled by parent loading state
  }

  // Using actual data from API response with correct field names
  const data: UserDataType[] = [
    {
      title: 'Pendapatan',
      stats: formatIDR(profitData.summary.total_revenue),
      avatarIcon: 'tabler-trending-up',
      avatarColor: 'success',
      trend: 'positive',
      trendNumber: 'Current Period',
      subtitle: 'Total Revenue'
    },
    {
      title: 'Margin Laba Bersih',
      stats: formatPercentage(profitData.summary.net_profit_margin),
      avatarIcon: 'tabler-gauge',
      avatarColor: profitData.summary.net_profit_margin >= 0 ? 'success' : 'error',
      trend: profitData.summary.net_profit_margin >= 0 ? 'positive' : 'negative',
      trendNumber: 'Current Period',
      subtitle: 'Net Profit Margin'
    },
    {
      title: 'Laba Kotor',
      stats: formatIDR(profitData.summary.gross_profit),
      avatarIcon: 'tabler-trending-up',
      avatarColor: profitData.summary.gross_profit >= 0 ? 'success' : 'error',
      trend: profitData.summary.gross_profit >= 0 ? 'positive' : 'negative',
      trendNumber: 'Current Period',
      subtitle: 'Gross Profit'
    },
    {
      title: 'Laba Bersih',
      stats: formatIDR(profitData.summary.net_profit),
      avatarIcon: profitData.summary.net_profit >= 0 ? 'tabler-trending-up' : 'tabler-trending-down',
      avatarColor: profitData.summary.net_profit >= 0 ? 'success' : 'error',
      trend: profitData.summary.net_profit >= 0 ? 'positive' : 'negative',
      trendNumber: 'Current Period',
      subtitle: 'Net Profit'
    },
    {
      title: 'Margin Laba Kotor',
      stats: formatPercentage(profitData.summary.gross_profit_margin),
      avatarIcon: 'tabler-gauge',
      avatarColor: profitData.summary.gross_profit_margin >= 0 ? 'success' : 'error',
      trend: profitData.summary.gross_profit_margin >= 0 ? 'positive' : 'negative',
      trendNumber: 'Current Period',
      subtitle: 'Gross Profit Margin'
    },
    {
      title: 'Total Cost',
      stats: formatIDR(profitData.summary.total_cost),
      avatarIcon: 'tabler-trending-down',
      avatarColor: 'error',
      trend: 'negative',
      trendNumber: 'Current Period',
      subtitle: 'Total Cost'
    },
    {
      title: 'Tax',
      stats: formatIDR(profitData.summary.total_tax),
      avatarIcon: 'tabler-receipt-tax',
      avatarColor: 'warning',
      trend: 'neutral',
      trendNumber: 'Current Period',
      subtitle: 'Total Tax'
    },
    {
      title: 'Total Orders',
      stats: profitData.summary.total_orders.toString(),
      avatarIcon: 'tabler-shopping-cart',
      avatarColor: 'info',
      trend: 'positive',
      trendNumber: 'Current Period',
      subtitle: 'Total Orders'
    }
  ]

  return (
    <Grid container spacing={6}>
      {data.map((item, i) => (
        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
          <HorizontalWithSubtitle {...item} />
        </Grid>
      ))}
    </Grid>
  )
}

export default ReportProfitLossCard
