'use client'

// React Imports
import type { FC } from 'react'

// MUI Imports
import { Box, Typography, Divider } from '@mui/material'
import { useTheme } from '@mui/material/styles'

// Component Imports
import Logo from '@core/svg/Logo'

// Type Imports
import type { Outlet } from '@/types/services/outlet'

// Props Interface
export interface ReportHeaderProps {
  outlet?: Outlet
  reportTitle: string
  reportSubtitle?: string
  brandName?: string
  brandColor?: string
  className?: string
  periode?: string
}

const ReportHeader: FC<ReportHeaderProps> = ({
  outlet,
  reportTitle,
  reportSubtitle = 'Laporan Operasional',
  brandName = 'Apskel',
  brandColor,
  className,
  periode
}) => {
  // Hooks
  const theme = useTheme()

  return (
    <Box className={className}>
      <Box sx={{ p: theme.spacing(8, 8, 6) }}>
        <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
          {/* Left Section - Brand & Outlet Info */}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <Logo />
            <Box>
              <Typography
                variant='h3'
                component='h1'
                sx={{
                  fontWeight: 700,
                  color: brandColor || theme.palette.primary.main
                }}
              >
                {brandName}
              </Typography>
              {outlet?.name && (
                <Typography
                  variant='h5'
                  component='h2'
                  sx={{
                    fontWeight: 600,
                    mt: 1,
                    color: theme.palette.text.primary
                  }}
                >
                  {outlet.name}
                </Typography>
              )}
              {outlet?.address && (
                <Typography
                  variant='body2'
                  sx={{
                    mt: 1,
                    color: theme.palette.text.secondary
                  }}
                >
                  {outlet.address}
                </Typography>
              )}
            </Box>
          </Box>

          {/* Right Section - Report Info */}
          <Box sx={{ textAlign: 'right' }}>
            <Typography
              variant='h4'
              component='h3'
              sx={{
                fontWeight: 700,
                color: theme.palette.text.primary
              }}
            >
              {reportTitle}
            </Typography>
            {periode && (
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 2, mt: 2 }}>
                <Typography variant='body2' sx={{ color: theme.palette.text.secondary }}>
                  {periode}
                </Typography>
              </Box>
            )}
            {reportSubtitle && (
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 2, mt: 2 }}>
                <Typography variant='body2' sx={{ color: theme.palette.text.secondary }}>
                  {reportSubtitle}
                </Typography>
              </Box>
            )}
          </Box>
        </Box>
      </Box>
      <Divider
        sx={{
          borderWidth: 2,
          borderColor: brandColor || theme.palette.primary.main
        }}
      />
    </Box>
  )
}

export default ReportHeader
