import { Box, Breadcrumbs, Typography } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'
import type { ReactNode } from 'react'
import { NavLink } from 'react-router'

interface BreadcrumbItem {
  label: string
  href?: string
}

interface PageHeaderProps {
  title: string
  subtitle?: string
  breadcrumbs?: BreadcrumbItem[]
  primaryAction?: ReactNode
  secondaryActions?: ReactNode
  badge?: ReactNode
  sx?: SxProps<Theme>
}

export function PageHeader({
  title,
  subtitle,
  breadcrumbs,
  primaryAction,
  secondaryActions,
  badge,
  sx,
}: PageHeaderProps) {
  return (
    <Box sx={{ px: 3, py: 2.5, borderBottom: '1px solid #e2e8f0', ...sx }}>
      {breadcrumbs && breadcrumbs.length > 0 && (
        <Breadcrumbs separator="/" sx={{ mb: 1 }}>
          {breadcrumbs.map((crumb) =>
            crumb.href ? (
              <NavLink
                key={crumb.label}
                to={crumb.href}
                style={{ textDecoration: 'none', color: '#64748b', fontSize: '0.75rem' }}
              >
                {crumb.label}
              </NavLink>
            ) : (
              <Typography key={crumb.label} sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
                {crumb.label}
              </Typography>
            ),
          )}
        </Breadcrumbs>
      )}

      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Typography variant="h6" sx={{ fontWeight: 600, lineHeight: 1.3 }}>
              {title}
            </Typography>
            {badge}
          </Box>
          {subtitle && (
            <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.25 }}>
              {subtitle}
            </Typography>
          )}
        </Box>

        {(primaryAction ?? secondaryActions) && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0, ml: 2 }}>
            {secondaryActions}
            {primaryAction}
          </Box>
        )}
      </Box>
    </Box>
  )
}