'use client'

import { useMemo } from'react'
import { TrendingUp, TrendingDown, Minus } from'lucide-react'
import type { OeeTrendRecord } from'@/lib/oee/legacy-types'

interface Props {
 records: OeeTrendRecord[]
 selectedLine: string
}

interface Row {
 label: string
 current: number | null
 previous: number | null
 unit: string
 higherIsBetter: boolean
}

function delta(current: number | null, previous: number | null): number | null {
 if (current == null || previous == null) return null
 return current - previous
}

function DeltaCell({ d, unit, higherIsBetter }: { d: number | null; unit: string; higherIsBetter: boolean }) {
 if (d == null) return <span className="text-muted-foreground">—</span>
 const good = higherIsBetter ? d >= 0 : d <= 0
 const color = Math.abs(d) < 0.001 ?'#6B7A8D': good ?'#008A00':'#CC0000'
 const Icon = Math.abs(d) < 0.001 ? Minus : good ? TrendingUp : TrendingDown
 const sign = d > 0 ?'+':''
 const formatted = unit ==='%'
 ? `${sign}${(d * 100).toFixed(1)} PP`
 : `${sign}${Math.round(d).toLocaleString('de-DE')} ${unit}`

 return (
 <span className="flex items-center gap-1 justify-end"style={{ color }}>
 <Icon size={12} />
 <span className="font-mono font-semibold text-xs">{formatted}</span>
 </span>
 )
}

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

 const current = sorted[0] ?? null
 const previous = sorted[1] ?? null

 if (!current) {
 return (
 <div className="bg-card rounded-xl border border-border px-5 py-6 text-center text-sm text-muted-foreground">
 Keine Daten für Wochenvergleich verfügbar.
 </div>
 )
 }

 const rows: Row[] = [
 { label:'OEE', current: current.oee_factor, previous: previous?.oee_factor ?? null, unit:'%', higherIsBetter: true },
 { label:'Verfügbarkeit', current: current.availability_factor, previous: previous?.availability_factor ?? null, unit:'%', higherIsBetter: true },
 { label:'Leistung', current: current.performance_factor, previous: previous?.performance_factor ?? null, unit:'%', higherIsBetter: true },
 { label:'Qualität', current: current.quality_factor, previous: previous?.quality_factor ?? null, unit:'%', higherIsBetter: true },
 { label:'Ausbringung', current: current.good_output, previous: previous?.good_output ?? null, unit:'Stk.', higherIsBetter: true },
 ]

 // Main loss driver (week-over-week — largest absolute deterioration)
 const lossDriver = (() => {
 if (!previous) return null
 const unplannedDelta = (current.unplanned_downtime_min ?? 0) - (previous.unplanned_downtime_min ?? 0)
 if (unplannedDelta > 5) {
 return `Ungeplante Stillstände (+${unplannedDelta.toFixed(0)} min vs. Vorwoche)`
 }
 const factors = [
 { name:'Verfügbarkeit', delta: (current.availability_factor ?? 0) - (previous.availability_factor ?? 0) },
 { name:'Leistung', delta: (current.performance_factor ?? 0) - (previous.performance_factor ?? 0) },
 { name:'Qualität', delta: (current.quality_factor ?? 0) - (previous.quality_factor ?? 0) },
 ].sort((a, b) => a.delta - b.delta)
 const worst = factors[0]
 if (worst.delta < -0.005) {
 return `${worst.name} (${(worst.delta * 100).toFixed(1)} PP vs. Vorwoche)`
 }
 return null
 })()

 return (
 <div className="bg-card rounded-xl border border-border overflow-hidden">
 {/* Header */}
 <div className="bg-primary-dark text-white px-5 py-3 flex items-center justify-between">
 <span className="text-sm font-semibold">Wochenvergleich</span>
 <span className="text-xs text-white/70 font-mono">
 KW {current.calendar_week}/{current.year}
 {previous ? ` vs. KW ${previous.calendar_week}/${previous.year}` :''}
 </span>
 </div>

 {/* Rows */}
 <div className="divide-y divide-border">
 {rows.map(row => {
 const d = delta(row.current, row.previous)
 const curFmt = row.current == null
 ?'—'
 : row.unit ==='%'
 ? `${(row.current * 100).toFixed(1)} %`
 : `${Math.round(row.current).toLocaleString('de-DE')} ${row.unit}`
 const prevFmt = row.previous == null
 ?'—'
 : row.unit ==='%'
 ? `${(row.previous * 100).toFixed(1)} %`
 : `${Math.round(row.previous).toLocaleString('de-DE')} ${row.unit}`

 return (
 <div key={row.label} className="grid grid-cols-4 items-center px-5 py-2.5 text-xs">
 <span className="font-medium text-muted-foreground">{row.label}</span>
 <span className="font-mono font-semibold text-foreground text-center">{curFmt}</span>
 <span className="font-mono text-muted-foreground text-center">→ {prevFmt}</span>
 <div className="text-right">
 <DeltaCell d={d} unit={row.unit} higherIsBetter={row.higherIsBetter} />
 </div>
 </div>
 )
 })}
 </div>

 {/* Loss driver */}
 {lossDriver && (
 <div className="px-5 py-3 bg-amber-50 border-t border-amber-100">
 <p className="text-xs font-medium text-amber-800">
 Hauptverlustursache: <span className="font-semibold">{lossDriver}</span>
 </p>
 </div>
 )}
 </div>
 )
}