property-match/src/components/demand/WeightingEditor.tsx

import { useState } from 'react'
import { Box, Button, Card, Divider, Slider, Typography } from '@mui/material'
import { RotateCcw } from 'lucide-react'
import { WEIGHTING_KEYS, WEIGHTING_LABELS } from '../../domain/needBuilder'
import type { WeightingKey } from '../../domain/needBuilder'
import { useDefaultWeights } from '../../hooks/useWeighting'

const HARD_KEYS: WeightingKey[] = ['area', 'location', 'budget', 'timing']
const SOFT_KEYS: WeightingKey[] = [
  'prestige', 'accessibility', 'expansionPotential', 'flexibility',
  'visibility', 'footfall', 'talentAccess', 'esg', 'taxEnvironment',
]

interface Props {
  weights: Record<WeightingKey, number>
  onChange: (weights: Record<WeightingKey, number>) => void
  assetType?: string
}

const IMPORTANCE_LABELS = ['', 'Unwichtig', 'Wenig wichtig', 'Wichtig', 'Sehr wichtig', 'Entscheidend']

function toRaw(w: Record<WeightingKey, number>): Record<WeightingKey, number> {
  const max = Math.max(...WEIGHTING_KEYS.map(k => w[k] ?? 0))
  if (max === 0) return Object.fromEntries(WEIGHTING_KEYS.map(k => [k, 3])) as Record<WeightingKey, number>
  return Object.fromEntries(
    WEIGHTING_KEYS.map(k => [k, Math.max(1, Math.round(((w[k] ?? 0) / max) * 5))])
  ) as Record<WeightingKey, number>
}

function rawToWeights(raw: Record<WeightingKey, number>): Record<WeightingKey, number> {
  const total = WEIGHTING_KEYS.reduce((s, k) => s + (raw[k] ?? 1), 0)
  return Object.fromEntries(
    WEIGHTING_KEYS.map(k => [k, (raw[k] ?? 1) / total])
  ) as Record<WeightingKey, number>
}

function SliderGroup({
  label, keys, raw, onSlider, color,
}: {
  label: string
  keys: WeightingKey[]
  raw: Record<WeightingKey, number>
  onSlider: (key: WeightingKey, v: number) => void
  color: string
}) {
  return (
    <Box>
      <Typography variant="caption" sx={{ fontWeight: 700, color, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem', display: 'block', mb: 1.5 }}>
        {label}
      </Typography>
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 32px' }}>
        {keys.map(key => {
          const importance = raw[key] ?? 3
          return (
            <Box key={key}>
              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
                <Typography variant="body2" sx={{ fontWeight: 500 }}>{WEIGHTING_LABELS[key]}</Typography>
                <Typography variant="caption" color="text.secondary">{IMPORTANCE_LABELS[importance]}</Typography>
              </Box>
              <Slider
                value={importance}
                min={1} max={5} step={1} marks
                onChange={(_, v) => onSlider(key, v as number)}
                size="small"
                sx={{ color }}
              />
            </Box>
          )
        })}
      </Box>
    </Box>
  )
}

export function WeightingEditor({ weights, onChange, assetType }: Props) {
  const [raw, setRaw] = useState<Record<WeightingKey, number>>(() => toRaw(weights))
  const defaultWeights = useDefaultWeights(assetType)

  function handleSlider(key: WeightingKey, value: number) {
    const updated = { ...raw, [key]: value }
    setRaw(updated)
    onChange(rawToWeights(updated))
  }

  function handleReset() {
    setRaw(toRaw(defaultWeights))
    onChange(defaultWeights)
  }

  return (
    <Box sx={{ maxWidth: 720, mx: 'auto' }}>
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
        <Box>
          <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
            Wichtigkeit der Kriterien
          </Typography>
          <Typography variant="caption" color="text.secondary">
            Schieber nach rechts = wichtiger. Gewichtung wird automatisch berechnet.
          </Typography>
        </Box>
        <Button
          size="small"
          variant="outlined"
          startIcon={<RotateCcw size={14} />}
          onClick={handleReset}
        >
          Zurücksetzen
        </Button>
      </Box>

      <Card sx={{ p: 3 }}>
        <SliderGroup label="Harte Kriterien" keys={HARD_KEYS} raw={raw} onSlider={handleSlider} color="#152642" />
        <Divider sx={{ my: 2.5 }} />
        <SliderGroup label="Weiche Kriterien" keys={SOFT_KEYS} raw={raw} onSlider={handleSlider} color="#7c3aed" />
      </Card>
    </Box>
  )
}