'use client'
// tdd-guard:skip — presentational component; status-color logic lives in lib/oee/colors.ts (tested).

import { useState, useMemo } from'react'
import Link from'next/link'
import { TrendingUp, TrendingDown, Minus } from'lucide-react'
import { LineChart, Line, ResponsiveContainer } from'recharts'
import { formatPercent } from'@/lib/oee/engine'
import type { OeeRecord } from'@/components/oee/history-table'
import { oeeColorVar } from '@/lib/oee/colors'

interface Props {
 records: OeeRecord[]
}

interface SparklineProps {
 data: Array<{ v: number | null }>
 color: string
}

function Sparkline({ data, color }: SparklineProps) {
 const points = data.map((d, i) => ({ i, v: d.v ?? null }))
 return (
 <div className="w-16 h-7">
 <ResponsiveContainer width="100%"height="100%">
 <LineChart data={points}>
 <Line
 type="monotone"
 dataKey="v"
 stroke={color}
 strokeWidth={1.5}
 dot={false}
 connectNulls={false}
 />
 </LineChart>
 </ResponsiveContainer>
 </div>
 )
}

interface KpiMiniCardProps {
 label: string
 value: number | null | undefined
 delta?: number | null
 sparkData: Array<{ v: number | null }>
 color: string
 large?: boolean
}

function KpiMiniCard({ label, value, delta, sparkData, color, large }: KpiMiniCardProps) {
 const pct = value != null ? formatPercent(value) :'—'
 const TrendIcon = delta == null ? null : delta > 0.001 ? TrendingUp : delta < -0.001 ? TrendingDown : Minus
 const trendColor = delta == null ? 'var(--muted-foreground)' : delta > 0.001 ? 'var(--success)' : delta < -0.001 ? 'var(--destructive)' : 'var(--muted-foreground)'

 return (
 <div
 className="bg-card rounded-xl border border-border px-4 py-3 flex flex-col gap-1"
 style={{ borderLeftWidth: 3, borderLeftColor: color }}
 >
 <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">{label}</span>
 <div className="flex items-end justify-between gap-2">
 <span
 className={`font-mono font-bold ${large ?'text-2xl':'text-lg'}`}
 style={{ color }}
 >
 {pct}
 </span>
 <Sparkline data={sparkData} color={color} />
 </div>
 {TrendIcon && delta != null && (
 <div className="flex items-center gap-1"style={{ color: trendColor }}>
 <TrendIcon size={11} />
 <span className="text-[10px] font-medium font-mono">
 {delta > 0 ?'+':''}{(delta * 100).toFixed(1)} PP
 </span>
 </div>
 )}
 </div>
 )
}

export default function MiniDashboard({ records }: Props) {
 const uniqueLines = useMemo(
 () => Array.from(new Set(records.map(r => r.line_name))).sort(),
 [records]
 )
 const [selectedLine, setSelectedLine] = useState<string>('')

 const filtered = useMemo(() => {
 const base = selectedLine ? records.filter(r => r.line_name === selectedLine) : records
 return [...base].sort((a, b) => {
 if (b.year !== a.year) return b.year - a.year
 return b.calendar_week - a.calendar_week
 })
 }, [records, selectedLine])

 const latest = filtered[0] ?? null
 const prevRec = filtered[1] ?? null

 const last8 = filtered.slice(0, 8).reverse()

 function sparkOf(key:'oee_factor'|'availability_factor'|'performance_factor'|'quality_factor') {
 return last8.map(r => ({ v: r[key] != null ? (r[key] as number) * 100 : null }))
 }

 const delta = (key:'oee_factor'|'availability_factor'|'performance_factor'|'quality_factor') => {
 if (!latest || !prevRec) return null
 const a = latest[key]
 const b = prevRec[key]
 return a != null && b != null ? (a as number) - (b as number) : null
 }

 if (records.length === 0) {
 return (
 <div className="bg-card rounded-xl border border-border px-5 py-4 flex items-center justify-between">
 <p className="text-sm text-muted-foreground">Noch keine OEE-Daten erfasst. Starte mit der ersten Berechnung.</p>
 <a
 href="#calculator"
 className="h-9 px-4 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition-colors flex items-center"
 >
 Neue Berechnung
 </a>
 </div>
 )
 }

 return (
 <div className="bg-card rounded-xl border border-border p-4 space-y-3">
 {/* Header row */}
 <div className="flex items-center justify-between gap-3 flex-wrap">
 <div className="flex items-center gap-3">
 <span className="text-sm font-semibold text-foreground">
 {latest ? `KW ${latest.calendar_week} / ${latest.year}` :'—'}
 </span>
 {uniqueLines.length > 1 && (
 <select
 value={selectedLine}
 onChange={e => setSelectedLine(e.target.value)}
 className="h-7 px-2 rounded-lg border border-border bg-background text-xs focus:outline-none focus:ring-1 focus:ring-primary"
 >
 <option value="">Alle Linien</option>
 {uniqueLines.map(l => <option key={l} value={l}>{l}</option>)}
 </select>
 )}
 {latest?.plant_name && (
 <span className="text-xs text-muted-foreground">{latest.plant_name}</span>
 )}
 </div>
 <a
 href="#calculator"
 className="h-8 px-3 bg-primary text-white rounded-lg text-xs font-medium hover:bg-primary-dark transition-colors flex items-center"
 >
 Neue Berechnung
 </a>
 </div>

 {/* KPI strip */}
 <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
 <KpiMiniCard
 label="OEE"
 value={latest?.oee_factor != null ? latest.oee_factor : null}
 delta={delta('oee_factor')}
 sparkData={sparkOf('oee_factor')}
 color={oeeColorVar(latest?.oee_factor)}
 large
 />
 <KpiMiniCard
 label="Verfügbarkeit"
 value={latest?.availability_factor != null ? latest.availability_factor : null}
 delta={delta('availability_factor')}
 sparkData={sparkOf('availability_factor')}
 color="#16A34A"
 />
 <KpiMiniCard
 label="Leistung"
 value={latest?.performance_factor != null ? latest.performance_factor : null}
 delta={delta('performance_factor')}
 sparkData={sparkOf('performance_factor')}
 color={oeeColorVar(latest?.performance_factor)}
 />
 <KpiMiniCard
 label="Qualität"
 value={latest?.quality_factor != null ? latest.quality_factor : null}
 delta={delta('quality_factor')}
 sparkData={sparkOf('quality_factor')}
 color="#0891B2"
 />
 </div>
 </div>
 )
}