import {
  Box,
  Button,
  Card,
  Chip,
  Divider,
  LinearProgress,
  Typography,
} from '@mui/material'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { Building2 } from 'lucide-react'
import { useState } from 'react'
import { EmptyState, ErrorState, LoadingPage } from '../../components/ui'
import { matchService } from '../../services/matchService'
import { propertyService } from '../../services/propertyService'
import { needService } from '../../services/needService'
import { MatchStrength, RiskLevel } from '../../domain/enums'

function getMatchStrengthLabel(strength: MatchStrength): string {
  switch (strength) {
    case MatchStrength.STRONG: return 'Stark'
    case MatchStrength.MODERATE: return 'Mittel'
    case MatchStrength.WEAK: return 'Schwach'
  }
}

function getMatchStrengthColor(strength: MatchStrength): 'success' | 'warning' | 'error' {
  switch (strength) {
    case MatchStrength.STRONG: return 'success'
    case MatchStrength.MODERATE: return 'warning'
    case MatchStrength.WEAK: return 'error'
  }
}

function getScoreColor(strength: MatchStrength): string {
  switch (strength) {
    case MatchStrength.STRONG: return '#1a7a4a'
    case MatchStrength.MODERATE: return '#d97706'
    case MatchStrength.WEAK: return '#c0392b'
  }
}

function getConfidenceColor(score: number): 'success' | 'primary' | 'warning' {
  if (score >= 0.85) return 'success'
  if (score >= 0.65) return 'primary'
  return 'warning'
}

function getConfidenceLabel(score: number): string {
  if (score >= 0.85) return 'Hoch'
  if (score >= 0.65) return 'Mittel'
  return 'Niedrig'
}

function getRiskLabel(level: RiskLevel): string {
  switch (level) {
    case RiskLevel.LOW: return 'Niedriges Risiko'
    case RiskLevel.MEDIUM: return 'Mittleres Risiko'
    case RiskLevel.HIGH: return 'Hohes Risiko'
    case RiskLevel.CRITICAL: return 'Kritisches Risiko'
  }
}

function getRiskColor(level: RiskLevel): 'success' | 'warning' | 'error' {
  switch (level) {
    case RiskLevel.LOW: return 'success'
    case RiskLevel.MEDIUM: return 'warning'
    case RiskLevel.HIGH: return 'error'
    case RiskLevel.CRITICAL: return 'error'
  }
}

export default function MatchCenter() {
  const [filterStrength, setFilterStrength] = useState<MatchStrength | 'ALL'>('ALL')

  const queryClient = useQueryClient()

  const { data: matchResp, isLoading: matchLoading, error: matchError } = useQuery({
    queryKey: ['matches'],
    queryFn: () => matchService.getAll(),
  })
  const { data: propResp, isLoading: propLoading, error: propError } = useQuery({
    queryKey: ['properties'],
    queryFn: () => propertyService.getAll(),
  })
  const { data: needResp, isLoading: needLoading, error: needError } = useQuery({
    queryKey: ['needs'],
    queryFn: () => needService.getAll(),
  })

  const approveMutation = useMutation({
    mutationFn: (matchId: string) => matchService.approve(matchId, 'admin@ideal-sharing.ch'),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['matches'] }),
  })

  if (matchLoading || propLoading || needLoading) return <LoadingPage />
  if (matchError || propError || needError) return <ErrorState />

  const matches = matchResp?.data ?? []
  const properties = propResp?.data ?? []
  const needs = needResp?.data ?? []

  const filtered = filterStrength === 'ALL'
    ? matches
    : matches.filter(m => m.matchStrength === filterStrength)

  const sortedFiltered = [...filtered].sort((a, b) => b.matchScore - a.matchScore)

  const strengthFilters: { value: MatchStrength | 'ALL'; label: string }[] = [
    { value: 'ALL', label: 'Alle' },
    { value: MatchStrength.STRONG, label: 'Stark' },
    { value: MatchStrength.MODERATE, label: 'Mittel' },
    { value: MatchStrength.WEAK, label: 'Schwach' },
  ]

  return (
    <Box>
      {/* Page Header */}
      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }} className="flex items-center justify-between">
        <Box>
          <Box className="flex items-center gap-2">
            <Typography variant="h5" fontWeight={700} color="text.primary">Match Center</Typography>
            <Chip label={`${matches.length} Matches`} size="small" sx={{ bgcolor: '#1e3a5f', color: 'white', fontWeight: 700 }} />
          </Box>
          <Typography variant="body2" color="text.secondary">KI-gestützte Objekt-Bedarfs-Analyse</Typography>
        </Box>
      </Box>

      {/* Content */}
      <Box sx={{ px: 3, py: 3 }} className="flex flex-col gap-3">

        {/* Filter Chips */}
        <Box className="flex items-center gap-2">
          {strengthFilters.map(f => (
            <Chip
              key={f.value}
              label={f.label}
              variant={filterStrength === f.value ? 'filled' : 'outlined'}
              size="small"
              onClick={() => setFilterStrength(f.value)}
              color={
                f.value === MatchStrength.STRONG ? 'success'
                : f.value === MatchStrength.MODERATE ? 'warning'
                : f.value === MatchStrength.WEAK ? 'error'
                : 'default'
              }
              sx={{ cursor: 'pointer', fontWeight: filterStrength === f.value ? 700 : 400 }}
            />
          ))}
        </Box>

        {/* Match Cards */}
        {sortedFiltered.length === 0 ? (
          <EmptyState title="Keine Matches gefunden" description="Passen Sie den Filter an." />
        ) : (
          <Box className="flex flex-col gap-4">
            {sortedFiltered.map(match => {
              const property = properties.find(p => p.id === match.propertyId)
              const need = needs.find(n => n.id === match.needId)

              return (
                <Card key={match.id} sx={{ elevation: 1, p: 2.5 }}>
                  <Box className="flex gap-4">
                    {/* Left column: score */}
                    <Box sx={{ width: 80, flexShrink: 0, textAlign: 'center' }} className="flex flex-col items-center gap-1">
                      <Typography variant="h3" fontWeight={700} sx={{ color: getScoreColor(match.matchStrength) }}>
                        {match.matchScore}
                      </Typography>
                      <Typography variant="caption" color="text.secondary">/ 100</Typography>
                      <Chip
                        label={getMatchStrengthLabel(match.matchStrength)}
                        color={getMatchStrengthColor(match.matchStrength)}
                        size="small"
                      />
                    </Box>

                    {/* Center column: details */}
                    <Box className="flex-1 flex flex-col gap-2">
                      {/* Property info */}
                      <Box className="flex items-center gap-1">
                        <Building2 size={16} color="#1e3a5f" />
                        <Typography variant="h6" fontWeight={600}>
                          {property?.title ?? match.propertyId}
                        </Typography>
                      </Box>
                      {need && (
                        <Typography variant="body2" color="text.secondary">
                          {need.companyName} — {need.assetType}
                        </Typography>
                      )}

                      <Divider />

                      {/* Positive factors */}
                      <Box className="flex flex-col gap-1">
                        {match.positiveFactors.slice(0, 3).map((f, i) => (
                          <Box key={i} className="flex items-center gap-2">
                            <Typography variant="caption" sx={{ color: '#1a7a4a', fontWeight: 600 }}>
                              ✓ {f.criterion}: {Math.round(f.score)}%
                            </Typography>
                            <Box sx={{ width: 60 }}>
                              <LinearProgress
                                variant="determinate"
                                value={f.score}
                                color="success"
                                sx={{ height: 4, borderRadius: 2 }}
                              />
                            </Box>
                          </Box>
                        ))}
                      </Box>

                      {/* Negative factors */}
                      {match.negativeFactors.slice(0, 2).map((f, i) => (
                        <Typography key={i} variant="caption" sx={{ color: '#c0392b' }}>
                          ✗ {f.criterion}
                        </Typography>
                      ))}

                      {/* Tradeoffs */}
                      {match.tradeoffs.length > 0 && (
                        <Box>
                          {match.tradeoffs.slice(0, 2).map((t, i) => (
                            <Typography key={i} variant="caption" sx={{ color: '#d97706' }}>
                              ⚠ {t.concern}
                            </Typography>
                          ))}
                        </Box>
                      )}
                    </Box>

                    {/* Right column: actions */}
                    <Box sx={{ width: 160, flexShrink: 0, textAlign: 'right' }} className="flex flex-col gap-2 items-end">
                      <Chip
                        label={`Konfidenz: ${getConfidenceLabel(match.confidenceLevel)}`}
                        color={getConfidenceColor(match.confidenceLevel)}
                        size="small"
                      />
                      <Chip
                        label={getRiskLabel(match.riskLevel)}
                        color={getRiskColor(match.riskLevel)}
                        size="small"
                        variant="outlined"
                      />
                      <Button
                        variant="outlined"
                        size="small"
                        fullWidth
                        disabled
                      >
                        Details
                      </Button>
                      {match.isApproved ? (
                        <Chip
                          label="✓ Genehmigt"
                          color="success"
                          size="small"
                          sx={{ width: '100%', justifyContent: 'center' }}
                        />
                      ) : (
                        <Button
                          variant="contained"
                          size="small"
                          fullWidth
                          color="primary"
                          sx={{ bgcolor: '#1e3a5f' }}
                          onClick={() => approveMutation.mutate(match.id)}
                          disabled={approveMutation.isPending}
                        >
                          Genehmigen
                        </Button>
                      )}
                    </Box>
                  </Box>
                </Card>
              )
            })}
          </Box>
        )}
      </Box>
    </Box>
  )
}