import { Box, Chip, CircularProgress, Paper, Typography } from '@mui/material'
import { Lightbulb, MessageSquareQuote } from 'lucide-react'
import { useFitOutAdvice } from '../../hooks/useAI'
import { DS_TEXT, DS_SURFACE, DS_BORDER } from '../../lib/ds'

const RECOMMENDATION_META: Record<string, { label: string; bg: string; border: string; fg: string }> = {
  MIETERAUSBAU:     { label: 'Mieterausbau',            bg: DS_SURFACE.blue.bg,    border: DS_SURFACE.blue.border,    fg: DS_TEXT.signalDark },
  BKZ:              { label: 'Baukostenzuschuss (BKZ)', bg: DS_SURFACE.success.bg, border: DS_SURFACE.success.border, fg: DS_TEXT.success },
  MAB_AMORTISATION: { label: 'MAB-Amortisation',        bg: DS_SURFACE.success.bg, border: DS_SURFACE.success.border, fg: DS_TEXT.success },
}

interface Props {
  fitOut: string
  areaSqm: number
  mabPerSqm: number
  rentPricePerSqm: number
  requiredFitOut?: string
  tenantBudgetPerSqm?: number
}

export function FitOutAdvicePanel({ fitOut, areaSqm, mabPerSqm, rentPricePerSqm, requiredFitOut, tenantBudgetPerSqm }: Props) {
  const { data, isLoading, isError } = useFitOutAdvice({
    fitOut,
    areaSqm,
    mabPerSqm,
    requiredFitOut,
    tenantBudgetPerSqm,
    monthlyRentPerSqm: Math.round(rentPricePerSqm / 12),
  })

  // Fallback: KI-Ausfall blockiert nie — Panel wird einfach nicht gezeigt
  if (isError) return null

  if (isLoading || !data) {
    return (
      <Paper sx={{ p: 2.5, display: 'flex', alignItems: 'center', gap: 1.5 }}>
        <CircularProgress size={16} />
        <Typography variant="body2" sx={{ color: DS_TEXT.muted }}>KI-Ausbauempfehlung wird erstellt…</Typography>
      </Paper>
    )
  }

  const advice = data.data
  const meta = RECOMMENDATION_META[advice.recommendation] ?? RECOMMENDATION_META.MIETERAUSBAU

  return (
    <Paper sx={{ p: 2.5 }}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
        <Lightbulb size={15} color={DS_TEXT.secondary} />
        <Typography variant="h6" sx={{ fontWeight: 700 }}>KI-Ausbauempfehlung</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>

      <Typography variant="body2" sx={{ fontWeight: 700, mb: 0.75 }}>{advice.headline}</Typography>
      <Typography variant="body2" sx={{ color: DS_TEXT.secondary, mb: 1.5, lineHeight: 1.55 }}>
        {advice.explanation}
      </Typography>

      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', py: 1, px: 1.5, mb: 1.5, bgcolor: DS_SURFACE.neutral.bg, border: `1px solid ${DS_BORDER.default}`, borderRadius: 1 }}>
        <Typography variant="caption" sx={{ color: DS_TEXT.muted, fontWeight: 600 }}>Geschätzte Nettoinvestition</Typography>
        <Typography variant="body2" sx={{ fontWeight: 700 }}>{advice.estimatedNetInvestment}</Typography>
      </Box>

      <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
        <MessageSquareQuote size={14} color={DS_TEXT.muted} style={{ marginTop: 3, flexShrink: 0 }} />
        <Typography variant="caption" sx={{ color: DS_TEXT.secondary, lineHeight: 1.5 }}>
          <strong>Verhandlungstipp:</strong> {advice.negotiationTip}
        </Typography>
      </Box>

      {data.provenance?.fallbackUsed && (
        <Typography variant="caption" sx={{ color: DS_TEXT.muted, display: 'block', mt: 1.25 }}>
          Hinweis: KI nicht verfügbar — Richtwert-basierte Empfehlung.
        </Typography>
      )}
    </Paper>
  )
}