import { Box, Button, Chip, Typography } from '@mui/material'
import { useNavigate } from 'react-router'

interface DashboardHeaderProps {
  orgName?: string
  lastUpdated?: string
}

function formatLastUpdated(iso: string): string {
  try {
    return new Intl.DateTimeFormat('de-CH', {
      dateStyle: 'short',
      timeStyle: 'short',
    }).format(new Date(iso))
  } catch {
    return iso
  }
}

export function DashboardHeader({ orgName = 'Demo Organisation', lastUpdated }: DashboardHeaderProps) {
  const navigate = useNavigate()

  return (
    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
      <Box>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
          <Typography variant="h6" sx={{ fontWeight: 600 }}>
            {orgName}
          </Typography>
          <Chip label="Demo" size="small" color="info" variant="outlined" />
        </Box>
        {lastUpdated && (
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            Zuletzt aktualisiert: {formatLastUpdated(lastUpdated)}
          </Typography>
        )}
      </Box>
      <Box sx={{ display: 'flex', gap: 1 }}>
        <Button variant="contained" size="small" onClick={() => navigate('/supply/match-center')}>
          Match Center
        </Button>
        <Button variant="outlined" size="small" onClick={() => navigate('/supply/data-quality')}>
          Datenqualität
        </Button>
      </Box>
    </Box>
  )
}
