// tdd-guard:skip — recharts presentation; chart data is computed and tested in lib/lsc-workshop
'use client'

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  ReferenceLine,
  Tooltip,
  ResponsiveContainer,
  Cell,
} from 'recharts'

export interface StepChartDatum {
  id: string
  step_number: number
  station_name: string
  observed_ct: number | null
  planned_ct: number | null
  isBottleneck: boolean
}

interface Props {
  data: StepChartDatum[]
  customerTaktSec: number | null
  /** the currently selected station — its bar gets a selection ring (KAR-712) */
  activeStepId?: string | null
  /** bar click → select the station in the surrounding view (KAR-712) */
  onSelectStep?: (id: string) => void
}

interface ChartRow {
  name: string
  observed: number | null
  planned: number | null
  id: string
  isBottleneck: boolean
}

export default function WorkshopBottleneckChart({ data, customerTaktSec, activeStepId, onSelectStep }: Props) {
  if (data.length === 0) return null
  const hasAnyObserved = data.some((d) => d.observed_ct != null)
  if (!hasAnyObserved) {
    return (
      <div className="bg-card border border-border rounded-md p-6 text-center text-xs text-muted-foreground">
        Bottleneck-Diagramm erscheint sobald die ersten beobachteten Zykluszeiten erfasst sind.
      </div>
    )
  }

  const chartData: ChartRow[] = data.map((d) => ({
    name: `#${d.step_number} ${d.station_name}`,
    observed: d.observed_ct,
    planned: d.planned_ct,
    id: d.id,
    isBottleneck: d.isBottleneck,
  }))

  const maxY = Math.max(
    customerTaktSec ?? 0,
    ...chartData.map((r) => Math.max(r.observed ?? 0, r.planned ?? 0)),
  )

  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">
          Bottleneck-Diagramm
        </h3>
        <div className="flex items-center gap-4 text-xs text-muted-foreground">
          <span className="flex items-center gap-1">
            <span
              className="inline-block w-3 h-3 rounded-sm"
              style={{ backgroundColor: 'var(--primary)' }}
            />
            Beobachtete CT
          </span>
          <span className="flex items-center gap-1">
            <span
              className="inline-block w-3 h-3 rounded-sm"
              style={{ backgroundColor: 'var(--destructive)' }}
            />
            Bottleneck
          </span>
          {customerTaktSec != null && (
            <span className="flex items-center gap-1">
              <span
                className="inline-block w-3 h-0.5"
                style={{ backgroundColor: 'var(--ci-warning, #D48830)' }}
              />
              Kundentakt {customerTaktSec.toFixed(1)}s
            </span>
          )}
        </div>
      </header>
      <div className="w-full h-64">
        <ResponsiveContainer>
          <BarChart data={chartData} margin={{ top: 8, right: 16, bottom: 24, left: 8 }}>
            <CartesianGrid stroke="var(--border)" strokeDasharray="3 3" />
            <XAxis
              dataKey="name"
              tick={{ fontSize: 10, fill: 'var(--muted-foreground)' }}
              interval={0}
              angle={-20}
              textAnchor="end"
              height={50}
            />
            <YAxis
              tick={{ fontSize: 10, fill: 'var(--muted-foreground)' }}
              label={{
                value: 's',
                position: 'insideLeft',
                offset: 12,
                style: { fontSize: 10, fill: 'var(--muted-foreground)' },
              }}
              domain={[0, Math.ceil(maxY * 1.1)]}
            />
            <Tooltip
              contentStyle={{
                background: 'var(--popover)',
                border: '1px solid var(--border)',
                fontSize: 11,
                color: 'var(--popover-foreground)',
                borderRadius: 3,
              }}
              formatter={(value, name) => {
                const num = typeof value === 'number' ? value : Number(value)
                return [
                  Number.isFinite(num) ? `${num.toFixed(1)}s` : '—',
                  name === 'observed' ? 'Beobachtet' : 'Geplant',
                ]
              }}
            />
            <Bar
              dataKey="observed"
              radius={[2, 2, 0, 0]}
              cursor={onSelectStep ? 'pointer' : 'default'}
              onClick={(d) => d.id && onSelectStep?.(d.id)}
            >
              {chartData.map((entry) => {
                // Füllfarbe kodiert die Daten-Kategorie; die aktive Station ist
                // ein Selektions-Rahmen, keine eigene Farbe (wie yamazumi-chart).
                const isActive = entry.id === activeStepId
                return (
                  <Cell
                    key={entry.id}
                    fill={
                      entry.isBottleneck
                        ? 'var(--destructive)'
                        : 'var(--primary)'
                    }
                    opacity={isActive || !activeStepId ? 1 : 0.85}
                    stroke={isActive ? 'var(--primary)' : 'none'}
                    strokeWidth={isActive ? 3 : 0}
                  />
                )
              })}
            </Bar>
            <Bar dataKey="planned" fill="var(--muted-foreground)" radius={[2, 2, 0, 0]} opacity={0.4} />
            {customerTaktSec != null && (
              <ReferenceLine
                y={customerTaktSec}
                stroke="var(--ci-warning, #D48830)"
                strokeWidth={2}
                strokeDasharray="4 4"
                label={{
                  value: 'Kundentakt',
                  position: 'insideTopRight',
                  fill: 'var(--ci-warning, #D48830)',
                  fontSize: 10,
                }}
              />
            )}
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  )
}