'use client'

interface BenchmarkMarker {
 label: string
 value: number
 color: string
}

interface Props {
 oee: number | null
 targetOee?: number
}

export default function OeeBenchmarking({ oee, targetOee = 0.85 }: Props) {
 const oeeVal = oee ?? 0
 const oeeDisplay = oeeVal * 100

 const markers: BenchmarkMarker[] = [
 { label:'Branchendurchschnitt', value: 60, color:'#D97706'},
 { label: `Unternehmensziel (${(targetOee * 100).toFixed(0)}%)`, value: targetOee * 100, color:'var(--primary)'},
 { label:'World-Class (85%)', value: 85, color:'#008A00'},
 ]

 const industryAvg = 60
 const diffToIndustry = oeeDisplay - industryAvg
 const diffToTarget = oeeDisplay - targetOee * 100
 const diffToWorldClass = oeeDisplay - 85

 return (
 <div className="space-y-4">
 {/* Main bar */}
 <div className="relative">
 {/* Track */}
 <div className="h-6 bg-background rounded-full border border-border relative overflow-visible">
 {/* OEE fill */}
 <div
 className="h-full rounded-full transition-all duration-500"
 style={{
 width: `${Math.min(100, oeeDisplay)}%`,
 background: oeeDisplay >= 85 ?'#008A00': oeeDisplay >= 60 ?'#D97706':'#CC0000',
 }}
 />
 {/* Marker lines */}
 {markers.map(m => (
 <div
 key={m.label}
 className="absolute top-0 bottom-0 w-0.5"
 style={{ left: `${m.value}%`, backgroundColor: m.color }}
 >
 <div
 className="absolute -top-5 text-[9px] font-semibold whitespace-nowrap"
 style={{ color: m.color, left:'-1px', transform:'translateX(-50%)'}}
 >
 {m.value}%
 </div>
 </div>
 ))}
 </div>
 </div>

 {/* OEE value label */}
 <div className="flex items-center gap-2">
 <span
 className="text-2xl font-mono font-bold"
 style={{ color: oeeDisplay >= 85 ?'#008A00': oeeDisplay >= 60 ?'#D97706':'#CC0000'}}
 >
 {oeeDisplay.toFixed(1)} %
 </span>
 <span className="text-xs text-muted-foreground">Ihre aktuelle OEE</span>
 </div>

 {/* Comparison text */}
 <div className="space-y-2">
 {[
 { label:'Branchendurchschnitt (60 %)', diff: diffToIndustry, color:'#D97706'},
 { label: `Unternehmensziel (${(targetOee * 100).toFixed(0)} %)`, diff: diffToTarget, color:'var(--primary)'},
 { label:'World-Class (85 %)', diff: diffToWorldClass, color:'#008A00'},
 ].map(({ label, diff, color }) => (
 <div key={label} className="flex items-center justify-between text-xs">
 <div className="flex items-center gap-1.5">
 <span className="w-2.5 h-2.5 rounded-sm inline-block"style={{ backgroundColor: color }} />
 <span className="text-muted-foreground">{label}</span>
 </div>
 <span
 className="font-mono font-semibold"
 style={{ color: diff >= 0 ?'#008A00':'#CC0000'}}
 >
 {diff >= 0 ?'+':''}{diff.toFixed(1)} PP
 </span>
 </div>
 ))}
 </div>

 {/* Summary sentence */}
 {oee != null && (
 <p className="text-xs text-muted-foreground bg-background rounded-lg px-3 py-2 leading-relaxed">
 {diffToIndustry >= 0
 ? `Ihre OEE liegt ${diffToIndustry.toFixed(1)} PP über dem Branchendurchschnitt.`
 : `Ihre OEE liegt ${Math.abs(diffToIndustry).toFixed(1)} PP unter dem Branchendurchschnitt.`
 }
 {diffToTarget >= 0
 ? ` Das Unternehmensziel wird um ${diffToTarget.toFixed(1)} PP übertroffen.`
 : ` Das Unternehmensziel wird um ${Math.abs(diffToTarget).toFixed(1)} PP verfehlt.`
 }
 </p>
 )}
 </div>
 )
}