import React from 'react'
import { Box, Typography, Paper } from '@mui/material'

// Types
type ReportItemHeaderProps = {
  title: string
  date?: string
  amount?: number
}

type ReportItemSubheaderProps = {
  title: string
}

type ReportItemProps = {
  accountCode: string
  accountName: string
  amount: number
  onClick?: () => void
  isSubtitle?: boolean
}

type ReportItemFooterProps = {
  title: string
  amount: number
  children?: React.ReactNode
}

// Helper function to format currency
const formatCurrency = (amount: number) => {
  return new Intl.NumberFormat('id-ID', {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(amount)
}

// ReportItemHeader Component
export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date, amount }) => {
  return (
    <Box className='bg-slate-200 px-6 py-4 flex justify-between items-center'>
      <Typography variant='h6' className='text-primary font-semibold'>
        {title}
      </Typography>
      <Typography variant='body1' className='text-primary font-medium'>
        {amount ? formatCurrency(amount) : date}
      </Typography>
    </Box>
  )
}

// ReportItemSubheader Component
export const ReportItemSubheader: React.FC<ReportItemSubheaderProps> = ({ title }) => {
  return (
    <Box className='px-6 py-3 bg-white border-b border-gray-300 hover:bg-gray-50 transition-colors'>
      <Typography variant='subtitle1' className='font-semibold text-gray-900'>
        {title}
      </Typography>
    </Box>
  )
}

// ReportItem Component
export const ReportItem: React.FC<ReportItemProps> = ({
  accountCode,
  accountName,
  amount,
  onClick,
  isSubtitle = true
}) => {
  return (
    <Box
      onClick={onClick}
      className={`px-6 py-3 flex justify-between items-center bg-white border-b border-gray-300 transition-all duration-200 ease-in-out ${
        onClick ? 'cursor-pointer hover:bg-gray-50' : 'cursor-default'
      }`}
    >
      <Typography variant='body1' className={`text-gray-900 font-normal ${isSubtitle ? 'ml-4' : ''}`}>
        {accountCode} {accountName}
      </Typography>
      <Typography variant='body1' className='text-primary font-medium text-right'>
        {formatCurrency(amount)}
      </Typography>
    </Box>
  )
}

// ReportItemFooter Component
export const ReportItemFooter: React.FC<ReportItemFooterProps> = ({ title, amount, children }) => {
  return (
    <Box className='px-6 py-4 border-b border-gray-300 hover:bg-gray-50 transition-colors'>
      <Box className='flex justify-between items-center'>
        <Typography variant='subtitle1' className='font-bold text-gray-900'>
          {title}
        </Typography>
        <Typography variant='subtitle1' className='text-primary font-bold text-right'>
          {formatCurrency(amount)}
        </Typography>
      </Box>
      {children && <Box className='mt-2'>{children}</Box>}
    </Box>
  )
}