property-match/.claude/worktrees/agent-a82a3716/src/components/compare/AICompareSummary.tsx

import { useState } from 'react'
import { Alert, Box, Chip, CircularProgress, Collapse, Typography } from '@mui/material'
import { ChevronDown, ChevronUp, Trophy, TrendingDown, ShieldCheck, AlertTriangle, Info, ArrowRight } from 'lucide-react'
import type { ComparisonSummary } from '../../services/aiService'

interface Props {
  summary?: ComparisonSummary
  isLoading: boolean
}

export function AICompareSummary({ summary, isLoading }: Props) {
  const [open, setOpen] = useState(true)

  return (
    <Box sx={{ mb: 2, border: '1px solid #e2e8f0', borderRadius: 1, overflow: 'hidden' }}>
      <Box
        onClick={() => setOpen(v => !v)}
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          px: 2,
          py: 1.25,
          bgcolor: '#f8fafc',
          cursor: 'pointer',
          '&:hover': { bgcolor: '#f1f5f9' },
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>AI Vergleichs-Zusammenfassung</Typography>
          <Chip label="Beta" size="small" sx={{ fontSize: 10, bgcolor: '#ede9fe', color: '#6d28d9' }} />
        </Box>
        {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
      </Box>

      <Collapse in={open}>
        <Box sx={{ p: 2 }}>
          {isLoading && (
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1 }}>
              <CircularProgress size={16} />
              <Typography variant="body2" color="text.secondary">Analyse wird erstellt…</Typography>
            </Box>
          )}

          {!isLoading && summary && (
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
              {/* Strongest option */}
              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
                <Trophy size={16} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 2 }} />
                <Box>
                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Stärkstes Match</Typography>
                  <Typography variant="body2" sx={{ fontWeight: 600 }}>{summary.strongestOption.label}</Typography>
                  <Typography variant="caption" color="text.secondary">{summary.strongestOption.reason}</Typography>
                </Box>
              </Box>

              {/* Best value */}
              {summary.bestValue && (
                <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
                  <TrendingDown size={16} color="#1e3a5f" style={{ flexShrink: 0, marginTop: 2 }} />
                  <Box>
                    <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Bestes Preis-Leistungs-Verhältnis</Typography>
                    <Typography variant="body2" sx={{ fontWeight: 600 }}>{summary.bestValue.label}</Typography>
                    <Typography variant="caption" color="text.secondary">{summary.bestValue.reason}</Typography>
                  </Box>
                </Box>
              )}

              {/* Highest confidence */}
              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
                <ShieldCheck size={16} color="#0891b2" style={{ flexShrink: 0, marginTop: 2 }} />
                <Box>
                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Höchste Datenkonfidenz</Typography>
                  <Typography variant="body2" sx={{ fontWeight: 600 }}>
                    {summary.highestConfidence.label}
                    <Typography component="span" variant="caption" color="text.secondary" sx={{ ml: 0.5 }}>
                      ({Math.round(summary.highestConfidence.confidenceLevel * 100)}%)
                    </Typography>
                  </Typography>
                </Box>
              </Box>

              {/* Tradeoffs */}
              {summary.biggestTradeoffs.length > 0 && (
                <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
                  <AlertTriangle size={16} color="#d97706" style={{ flexShrink: 0, marginTop: 2 }} />
                  <Box>
                    <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Wichtigste Abwägungen</Typography>
                    {summary.biggestTradeoffs.map((t, i) => (
                      <Typography key={i} variant="caption" color="text.secondary" sx={{ display: 'block' }}>· {t}</Typography>
                    ))}
                  </Box>
                </Box>
              )}

              {/* Missing data */}
              {summary.missingDataWarnings.length > 0 && (
                <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
                  <Info size={16} color="#c0392b" style={{ flexShrink: 0, marginTop: 2 }} />
                  <Box>
                    <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Fehlende Informationen</Typography>
                    {summary.missingDataWarnings.map((w, i) => (
                      <Typography key={i} variant="caption" color="error" sx={{ display: 'block' }}>· {w}</Typography>
                    ))}
                  </Box>
                </Box>
              )}

              {/* Next step */}
              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start', pt: 0.5, borderTop: '1px solid #f1f5f9', mt: 0.5 }}>
                <ArrowRight size={16} color="#1e3a5f" style={{ flexShrink: 0, marginTop: 2 }} />
                <Box>
                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Empfohlener nächster Schritt</Typography>
                  <Typography variant="body2">{summary.recommendedNextStep}</Typography>
                </Box>
              </Box>
            </Box>
          )}

          {!isLoading && !summary && (
            <Alert severity="info" sx={{ py: 0.5 }}>
              Mindestens 2 Ergebnisse auswählen, um die Zusammenfassung zu generieren.
            </Alert>
          )}

          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1.5, fontStyle: 'italic' }}>
            Diese Zusammenfassung basiert ausschliesslich auf den vorliegenden Daten und trifft keine endgültige Entscheidung.
          </Typography>
        </Box>
      </Collapse>
    </Box>
  )
}