// tdd-guard:skip — pure visualization, logic + tests in lib/lsc-workshop/measures-matrix.ts
'use client'

import {
  ScatterChart,
  Scatter,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  ReferenceLine,
  LabelList,
  Cell,
} from 'recharts'
import {
  computeMeasuresMatrix,
  type MeasureDatum,
  type Quadrant,
} from '@/lib/lsc-workshop/measures-matrix'

const QUADRANT_COLORS: Record<Quadrant, string> = {
  'quick-win': 'var(--ci-success, #008A00)',
  'big-project': 'var(--primary)',
  'fill-in': 'var(--muted-foreground)',
  'time-sink': 'var(--destructive)',
}

const QUADRANT_LABELS: Record<Quadrant, string> = {
  'quick-win': 'Quick Wins',
  'big-project': 'Grosse Projekte',
  'fill-in': 'Fill-Ins',
  'time-sink': 'Zeitfresser',
}

interface Props {
  data: MeasureDatum[]
}

export default function WorkshopMeasuresMatrixChart({ data }: Props) {
  const points = computeMeasuresMatrix(data)

  if (points.length === 0) {
    return (
      <div className="bg-card border border-border rounded-md p-6 text-center text-xs text-muted-foreground">
        Effort-Benefit-Matrix erscheint sobald Massnahmen bewertet sind.
      </div>
    )
  }

  return (
    <div className="bg-card border border-border rounded-md p-4 space-y-2">
      <header className="flex items-center justify-between">
        <h3 className="text-sm font-bold text-foreground">
          Effort-Benefit-Matrix
        </h3>
        <div className="flex items-center gap-3 text-xs text-muted-foreground">
          {(Object.keys(QUADRANT_COLORS) as Quadrant[]).map((q) => (
            <span key={q} className="flex items-center gap-1">
              <span
                className="inline-block w-2.5 h-2.5 rounded-full"
                style={{ backgroundColor: QUADRANT_COLORS[q] }}
              />
              {QUADRANT_LABELS[q]}
            </span>
          ))}
        </div>
      </header>
      <div className="w-full h-72">
        <ResponsiveContainer>
          <ScatterChart margin={{ top: 8, right: 16, bottom: 36, left: 16 }}>
            <CartesianGrid stroke="var(--border)" strokeDasharray="3 3" />
            <XAxis
              type="number"
              dataKey="x"
              name="Aufwand"
              domain={[0, 1]}
              tick={{ fontSize: 10, fill: 'var(--muted-foreground)' }}
              label={{
                value: 'Aufwand →',
                position: 'insideBottom',
                offset: -12,
                style: { fontSize: 11, fill: 'var(--muted-foreground)' },
              }}
            />
            <YAxis
              type="number"
              dataKey="y"
              name="Nutzen"
              domain={[0, 1]}
              tick={{ fontSize: 10, fill: 'var(--muted-foreground)' }}
              label={{
                value: 'Nutzen ↑',
                angle: -90,
                position: 'insideLeft',
                offset: 8,
                style: { fontSize: 11, fill: 'var(--muted-foreground)' },
              }}
            />
            <Tooltip
              contentStyle={{
                background: 'var(--popover)',
                border: '1px solid var(--border)',
                fontSize: 11,
                color: 'var(--popover-foreground)',
                borderRadius: 3,
              }}
              cursor={{ strokeDasharray: '3 3' }}
              formatter={(value, name, item) => {
                if (name === 'x') {
                  return [
                    Number(value).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
                    'Aufwand',
                  ]
                }
                if (name === 'y') {
                  return [
                    Number(value).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
                    'Nutzen',
                  ]
                }
                if (name === 'title' && item?.payload?.quadrant) {
                  return [String(value), QUADRANT_LABELS[item.payload.quadrant as Quadrant]]
                }
                return [String(value), String(name)]
              }}
              labelFormatter={(_, payload) => {
                const first = payload?.[0]?.payload
                return first?.title ?? ''
              }}
            />
            <ReferenceLine x={0.5} stroke="var(--border)" strokeDasharray="4 4" />
            <ReferenceLine y={0.5} stroke="var(--border)" strokeDasharray="4 4" />
            <Scatter data={points}>
              {points.map((p) => (
                <Cell key={p.id} fill={QUADRANT_COLORS[p.quadrant]} />
              ))}
              <LabelList
                dataKey="title"
                position="top"
                style={{ fontSize: 10, fill: 'var(--foreground)' }}
              />
            </Scatter>
          </ScatterChart>
        </ResponsiveContainer>
      </div>
    </div>
  )
}