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

import { useState } from 'react'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts'
import { computeTimeComposition, type TimeCompositionDatum } from '@/lib/lsc-workshop/time-composition'

interface Props {
  data: TimeCompositionDatum[]
}

// G5 — Gestapelt/Einzeln toggle
type ViewMode = 'stacked' | 'grouped'

export default function WorkshopTimeCompositionChart({ data }: Props) {
  const [viewMode, setViewMode] = useState<ViewMode>('stacked')
  const chartData = computeTimeComposition(data)

  if (chartData.length === 0) {
    return (
      <div className="bg-card border border-border rounded-md p-6 text-center text-xs text-muted-foreground">
        Zeit-Komposition erscheint sobald Maschinen-/Manuelle-/Wartezeiten erfasst sind.
      </div>
    )
  }

  const stackId = viewMode === 'stacked' ? 't' : undefined

  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">
          Zeit-Komposition pro Station
        </h3>
        <div className="flex items-center gap-1 rounded-lg border border-border overflow-hidden">
          <button
            onClick={() => setViewMode('stacked')}
            className={`px-2.5 py-1 text-xs font-medium transition-colors ${
              viewMode === 'stacked'
                ? 'bg-primary text-white'
                : 'text-muted-foreground hover:bg-muted'
            }`}
          >
            Gestapelt
          </button>
          <button
            onClick={() => setViewMode('grouped')}
            className={`px-2.5 py-1 text-xs font-medium transition-colors ${
              viewMode === 'grouped'
                ? 'bg-primary text-white'
                : 'text-muted-foreground hover:bg-muted'
            }`}
          >
            Einzeln
          </button>
        </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)' },
              }}
            />
            <Tooltip
              contentStyle={{
                background: 'var(--popover)',
                border: '1px solid var(--border)',
                fontSize: 11,
                color: 'var(--popover-foreground)',
                borderRadius: 3,
              }}
              formatter={(value) => {
                const num = typeof value === 'number' ? value : Number(value)
                return Number.isFinite(num)
                  ? `${num.toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}s`
                  : '—'
              }}
            />
            <Legend wrapperStyle={{ fontSize: 11 }} />
            <Bar dataKey="machine" stackId={stackId} fill="var(--primary)" name="Maschinenzeit" />
            <Bar dataKey="manual" stackId={stackId} fill="var(--secondary, #003D6B)" name="Manuelle Zeit" />
            <Bar dataKey="waiting" stackId={stackId} fill="var(--destructive)" name="Wartezeit" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  )
}