import { Box, Typography } from '@mui/material'
import type { ReminderActivity } from '../../domain/reminder'

export const SHADOW_RISK_COLOR: Record<string, string> = {
  NONE: '#64748b',
  LOW: '#16a34a',
  MEDIUM: '#ca8a04',
  HIGH: '#dc2626',
}

export const SHADOW_RISK_LABEL: Record<string, string> = {
  NONE: 'Kein Risiko',
  LOW: 'Niedrig',
  MEDIUM: 'Mittel',
  HIGH: 'Hoch',
}

export const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
  ACTIVE: 'info',
  SNOOZED: 'warning',
  COMPLETED: 'success',
  DISMISSED: 'default',
}

export const STATUS_LABEL: Record<string, string> = {
  ACTIVE: 'Aktiv',
  SNOOZED: 'Schlummernd',
  COMPLETED: 'Erledigt',
  DISMISSED: 'Verworfen',
}

export const ACTION_LABEL: Record<string, string> = {
  CREATED: 'Erstellt',
  SNOOZED: 'Zurückgestellt',
  COMPLETED: 'Erledigt',
  DISMISSED: 'Verworfen',
  NOTED: 'Notiz',
}

export function SectionTitle({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
      {icon}
      <Typography variant="subtitle2" sx={{ fontWeight: 700, color: '#1e293b', fontSize: '0.8125rem' }}>
        {children}
      </Typography>
    </Box>
  )
}

export function DateRow({ label, value }: { label: string; value?: string }) {
  if (!value) return null
  return (
    <Box sx={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 1, alignItems: 'baseline' }}>
      <Typography variant="caption" color="text.secondary">{label}</Typography>
      <Typography variant="body2" sx={{ fontWeight: 500 }}>{new Date(value).toLocaleDateString('de-CH')}</Typography>
    </Box>
  )
}

export function ActivityEntry({ entry }: { entry: ReminderActivity }) {
  return (
    <Box sx={{ display: 'flex', gap: 1.5 }}>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
        <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: '#94a3b8', mt: '4px' }} />
        <Box sx={{ width: 1, flex: 1, bgcolor: '#e8e7e4', mt: 0.5 }} />
      </Box>
      <Box sx={{ pb: 1.5, minWidth: 0 }}>
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'baseline', flexWrap: 'wrap' }}>
          <Typography variant="caption" sx={{ fontWeight: 600, color: '#1e293b' }}>
            {ACTION_LABEL[entry.action]}
          </Typography>
          <Typography variant="caption" color="text.secondary">
            {entry.by} · {new Date(entry.at).toLocaleDateString('de-CH')}
          </Typography>
        </Box>
        {entry.note && (
          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25 }}>
            {entry.note}
          </Typography>
        )}
      </Box>
    </Box>
  )
}