import { Box, Card, CardContent, Divider, LinearProgress, Typography } from '@mui/material'
import { useNavigate } from 'react-router'
import type { FutureSignalSummary } from '../../domain/dashboard'

interface FutureSignalWidgetProps {
  summary: FutureSignalSummary
}

interface StatItemProps {
  label: string
  value: number | string
  highlight?: boolean
}

function StatItem({ label, value, highlight }: StatItemProps) {
  return (
    <Box sx={{ textAlign: 'center' }}>
      <Typography
        variant="h5"
        sx={{ fontWeight: 700, color: highlight ? 'primary.main' : 'text.primary' }}
      >
        {value}
      </Typography>
      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
        {label}
      </Typography>
    </Box>
  )
}

export function FutureSignalWidget({ summary }: FutureSignalWidgetProps) {
  const navigate = useNavigate()
  const total = summary.total || 1
  const dist = summary.timeHorizonDistribution

  return (
    <Card>
      <CardContent sx={{ p: 2.5 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h6" sx={{ fontWeight: 600 }}>
            Marktsignale
          </Typography>
          <Typography
            variant="caption"
            sx={{ color: 'primary.main', cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }}
            onClick={() => navigate('/supply/future-availability')}
          >
            Alle anzeigen
          </Typography>
        </Box>

        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2, mb: 2.5 }}>
          <StatItem label="Gesamt" value={summary.total} />
          <StatItem label="Hohe Konfidenz" value={summary.highConfidence} highlight />
          <StatItem label="Zu prüfen" value={summary.needsReview} />
          <StatItem label="Ø Zeithorizont" value={`${summary.avgTimeHorizonMonths} Mon.`} />
        </Box>

        <Divider sx={{ mb: 2 }} />

        {/* Time horizon distribution */}
        <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600, display: 'block', mb: 1 }}>
          Zeithorizont-Verteilung
        </Typography>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
          {[
            { label: '0–6 Monate', count: dist.short },
            { label: '6–12 Monate', count: dist.medium },
            { label: '12–24 Monate', count: dist.long },
          ].map(({ label, count }) => (
            <Box key={label}>
              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
                <Typography variant="caption" sx={{ color: 'text.secondary' }}>{label}</Typography>
                <Typography variant="caption" sx={{ fontWeight: 600 }}>{count}</Typography>
              </Box>
              <LinearProgress
                variant="determinate"
                value={Math.round((count / total) * 100)}
                sx={{ height: 6, borderRadius: 3 }}
              />
            </Box>
          ))}
        </Box>

        {summary.restricted > 0 && (
          <>
            <Divider sx={{ my: 1.5 }} />
            <Typography variant="caption" sx={{ color: 'warning.main', display: 'block' }}>
              {summary.restricted} vertrauliche Signale — nur für berechtigte Nutzer sichtbar.
            </Typography>
          </>
        )}

        <Divider sx={{ my: 1.5 }} />
        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
          Marktsignale basieren auf AI-Analyse öffentlicher und interner Daten. Es handelt
          sich um probabilistische Einschätzungen, keine bestätigten Objekte.
        </Typography>
      </CardContent>
    </Card>
  )
}
