import { Box, Chip, Paper, Typography } from '@mui/material'
import { TrendingUp } from 'lucide-react'
import { estimateMarketRent, type RentVerdict } from '../../lib/rentEstimate'
import { DS_TEXT, DS_SURFACE, DS_BORDER } from '../../lib/ds'

const VERDICT_META: Record<RentVerdict, { label: string; bg: string; border: string; fg: string }> = {
  BELOW: { label: 'Unter Markt', bg: DS_SURFACE.success.bg, border: DS_SURFACE.success.border, fg: DS_TEXT.success },
  AT:    { label: 'Marktkonform', bg: DS_SURFACE.blue.bg,    border: DS_SURFACE.blue.border,    fg: DS_TEXT.signalDark },
  ABOVE: { label: 'Über Markt',   bg: DS_SURFACE.warning.bg,  border: DS_SURFACE.warning.border, fg: DS_TEXT.warning },
}

interface Props {
  city: string
  assetType: string
  askingRentPerSqm: number
  futureRentPerSqm?: number   // Pre-Market: erwarteter künftiger Preis
}

function chf(v: number): string {
  return `CHF ${Math.round(v).toLocaleString('de-CH')}/m²`
}

export function MarketPricePanel({ city, assetType, askingRentPerSqm, futureRentPerSqm }: Props) {
  const est = estimateMarketRent(city, assetType, askingRentPerSqm)
  if (!est) return null
  const meta = VERDICT_META[est.verdict]

  return (
    <Paper sx={{ p: 2.5 }}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
        <TrendingUp size={15} color={DS_TEXT.secondary} />
        <Typography variant="h6" sx={{ fontWeight: 700 }}>Marktpreis-Einschätzung</Typography>
        <Chip
          label={meta.label}
          size="small"
          sx={{ ml: 'auto', bgcolor: meta.bg, color: meta.fg, fontWeight: 700, fontSize: 11, height: 22, border: `1px solid ${meta.border}` }}
        />
      </Box>

      <Box sx={{ display: 'flex', gap: 2, mb: 1.25 }}>
        <Box sx={{ flex: 1, p: 1.25, border: `1px solid ${DS_BORDER.default}`, borderRadius: 1 }}>
          <Typography variant="caption" sx={{ color: DS_TEXT.muted }}>Angebotsmiete</Typography>
          <Typography variant="body1" sx={{ fontWeight: 700 }}>{chf(est.askingRentPerSqm)}</Typography>
        </Box>
        <Box sx={{ flex: 1, p: 1.25, border: `1px solid ${DS_BORDER.default}`, borderRadius: 1 }}>
          <Typography variant="caption" sx={{ color: DS_TEXT.muted }}>Faire Marktmiete</Typography>
          <Typography variant="body1" sx={{ fontWeight: 700 }}>
            {chf(est.fairRentPerSqm)}
            <Box component="span" sx={{ ml: 0.75, fontSize: 12, fontWeight: 600, color: meta.fg }}>
              {est.deltaPct > 0 ? `+${est.deltaPct}%` : `${est.deltaPct}%`}
            </Box>
          </Typography>
        </Box>
      </Box>

      {futureRentPerSqm != null && futureRentPerSqm > 0 && (
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', py: 1, px: 1.5, mb: 1.25, bgcolor: DS_SURFACE.purple.bg, border: `1px solid ${DS_SURFACE.purple.border}`, borderRadius: 1 }}>
          <Typography variant="caption" sx={{ color: DS_TEXT.muted, fontWeight: 600 }}>Erwartet (Pre-Market)</Typography>
          <Typography variant="body2" sx={{ fontWeight: 700 }}>
            {chf(est.askingRentPerSqm)} <Box component="span" sx={{ color: DS_TEXT.muted }}>→</Box> {chf(futureRentPerSqm)}
          </Typography>
        </Box>
      )}

      <Typography variant="caption" sx={{ color: DS_TEXT.muted, display: 'block' }}>
        {est.rationale}
      </Typography>
    </Paper>
  )
}