'use client';

/**
 * Performance — Latency dials. Avg-response headline strip → P50/P95/P99 radial
 * dials (colored by response threshold) → wide response-time trend chart.
 */
import { useSentinelContext } from '../../_components/SentinelDataContext';
import { CountUp, Delta, FadeUp, Gauge, LineChart, STATUS_FG, STATUS_RAW } from '../../_components/primitives';
import { responseStatus } from '@/lib/executive/status';
import type { StatusLevel } from '@/lib/executive/types';

const DIAL_LABEL: Record<StatusLevel, string> = { healthy: 'Within target', warning: 'Elevated', critical: 'Over threshold' };
const Eyebrow = ({ children }: { children: React.ReactNode }) => <div className="eyebrow" style={{ marginBottom: 8 }}>{children}</div>;

export default function PerformancePage() {
    const { data, cycle } = useSentinelContext();
    if (!data) return null;
    const o = data.overview;
    const p = data.responsePercentiles;
    const respSeries = data.monthlyTrends.map((m) => m.responseTime);
    const dials: { label: string; value: number; max: number }[] = [
        { label: 'P50 · median', value: p.p50, max: 400 },
        { label: 'P95', value: p.p95, max: 1000 },
        { label: 'P99', value: p.p99, max: 2000 },
    ];

    return (
        <div key={cycle} style={{ display: 'grid', gridTemplateRows: 'auto 1fr 1.2fr', gap: 12, height: '100%', minHeight: 0 }}>
            {/* headline strip */}
            <FadeUp className="glass-card" style={{ padding: 20, display: 'flex', alignItems: 'center', gap: 36, flexWrap: 'wrap' }}>
                <div>
                    <Eyebrow>Average response · all monitors</Eyebrow>
                    <span className="tnum" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 7vw, 88px)', fontWeight: 600, color: STATUS_FG[responseStatus(o.avgResponseTime)], lineHeight: 1 }}>
                        <CountUp value={o.avgResponseTime} /><span style={{ fontSize: '0.4em', color: 'var(--fg-3)' }}> ms</span>
                    </span>
                </div>
                <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--hair)' }} />
                <div>
                    <Eyebrow>Month-over-month</Eyebrow>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <Delta value={o.responseTrend} goodWhenUp={false} />
                        <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg-2)' }}>{o.responseTrend < 0 ? 'faster' : 'slower'} than last month</span>
                    </div>
                </div>
            </FadeUp>

            {/* dials */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, minHeight: 0 }}>
                {dials.map((d, i) => {
                    const status = responseStatus(d.value);
                    return (
                        <FadeUp key={d.label} index={i} className="glass-card" style={{ padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 0, overflow: 'hidden' }}>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', marginBottom: 8 }}>
                                <span className="eyebrow">{d.label}</span>
                                <span className="pill" style={{ padding: '3px 9px', fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: STATUS_FG[status], background: `color-mix(in srgb, ${STATUS_RAW[status]} 14%, transparent)`, border: `1px solid color-mix(in srgb, ${STATUS_RAW[status]} 35%, transparent)` }}>{DIAL_LABEL[status]}</span>
                            </div>
                            <Gauge value={d.value} min={0} max={d.max} size={190} stroke={13} color={STATUS_RAW[status]}>
                                <span className="tnum" style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 600, color: 'var(--fg)' }}><CountUp value={d.value} /></span>
                                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>ms · max {d.max}</span>
                            </Gauge>
                        </FadeUp>
                    );
                })}
            </div>

            {/* response trend */}
            <FadeUp index={3} className="glass-card" style={{ padding: 20, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, flex: 'none' }}>
                    <Eyebrow>Response time · 12 months</Eyebrow>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>min {Math.min(...respSeries)}ms · max {Math.max(...respSeries)}ms</span>
                </div>
                <div style={{ flex: 1, minHeight: 0 }}>
                    <LineChart series={[{ key: 'response', color: 'var(--cyan)', data: respSeries, fill: true }]} yMin={Math.min(...respSeries) - 10} yMax={Math.max(...respSeries) + 10} grid={4} />
                </div>
            </FadeUp>
        </div>
    );
}