import DayNavigator from '@/Components/DayNavigator';
import PrintButton from '@/Components/PrintButton';
import { Badge } from '@/Components/ui/badge';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import SpirometryMetricChart from '@/Pages/Metric/SpirometryMetricChart';
import { Spirometry, User } from '@/types';
import { Head, router, usePage } from '@inertiajs/react';
import dayjs, { Dayjs } from 'dayjs';
import { useState } from 'react';

interface MetricDetailProps {
    measures: Spirometry[];
    patient: User;
    availableDates: string[];
}

const fmt = (v: number | undefined | null, digits = 2) =>
    v === null || v === undefined ? '-' : Number(v).toFixed(digits);

function MetricRow({
    label,
    value,
    unit,
}: {
    label: string;
    value: string;
    unit?: string;
}) {
    return (
        <div className="flex justify-between border-b border-zinc-100 py-1 text-sm">
            <span className="text-zinc-500">{label}</span>
            <span className="font-medium">
                {value}
                {unit ? ` ${unit}` : ''}
            </span>
        </div>
    );
}

export default function SpirometryMetricDetail({
    measures,
    patient,
    availableDates,
}: MetricDetailProps) {
    const user = usePage().props.auth.user;
    const now = dayjs();
    const { filters } = usePage().props;
    const [date, setDate] = useState(filters?.date || now.format('YYYY-MM-DD'));

    const onDateChange = (updatedDate: Dayjs) => {
        const dateString = dayjs(updatedDate).format('YYYY-MM-DD');
        setDate(dateString);
        router.get(
            route('spirometry.detail', { patient: patient.id }),
            { date: dateString },
            { preserveState: true, preserveScroll: true, replace: true },
        );
    };

    const backLinkLabel =
        patient.id === user.id
            ? 'Dashboard'
            : `${patient.name} ${patient.surname}`;

    const renderMeasure = (measure: Spirometry) => {
        const flow = measure.waveform_flow ?? [];
        const time = measure.waveform_time ?? [];
        const volume = measure.waveform_volume ?? [];

        const flowVolumeData = volume.map((v, i) => ({
            x: v,
            y: flow[i] ?? 0,
        }));
        const volumeTimeData = time.map((t, i) => ({
            x: t,
            y: volume[i] ?? 0,
        }));

        return (
            <div key={measure.id} className="mt-12">
                <div className="mb-4 flex flex-wrap gap-2">
                    <Badge>
                        {dayjs(measure.measured_at).format('HH:mm:ss')}
                    </Badge>
                    {measure.device_name && (
                        <Badge variant="outline">
                            {measure.device_label ?? measure.device_name}
                        </Badge>
                    )}
                    {measure.subtype && (
                        <Badge variant="outline">
                            {measure.subtype.toUpperCase()}
                        </Badge>
                    )}
                    {measure.standard && (
                        <Badge variant="outline">std: {measure.standard}</Badge>
                    )}
                </div>

                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <div>
                        <div className="mb-2 font-semibold text-zinc-700">
                            Parametri principali
                        </div>
                        <MetricRow
                            label="FVC"
                            value={fmt(measure.fvc)}
                            unit="L"
                        />
                        <MetricRow
                            label="FEV1"
                            value={fmt(measure.fev1)}
                            unit="L"
                        />
                        <MetricRow
                            label="FEV1/FVC"
                            value={fmt(measure.fev1_fvc, 1)}
                            unit="%"
                        />
                        <MetricRow
                            label="PEF"
                            value={fmt(measure.pef)}
                            unit="L/s"
                        />
                        <MetricRow
                            label="PEFT"
                            value={fmt(measure.peft, 0)}
                            unit="ms"
                        />
                        <MetricRow
                            label="EVOL"
                            value={fmt(measure.evol, 0)}
                            unit="mL"
                        />
                    </div>
                    <div>
                        <div className="mb-2 font-semibold text-zinc-700">
                            Flussi espiratori
                        </div>
                        <MetricRow
                            label="FEF25"
                            value={fmt(measure.fef25)}
                            unit="L/s"
                        />
                        <MetricRow
                            label="FEF50"
                            value={fmt(measure.fef50)}
                            unit="L/s"
                        />
                        <MetricRow
                            label="FEF75"
                            value={fmt(measure.fef75)}
                            unit="L/s"
                        />
                        <MetricRow
                            label="FEF25-75"
                            value={fmt(measure.fef2575)}
                            unit="L/s"
                        />
                        <MetricRow
                            label="FEV0.5"
                            value={fmt(measure.fev05)}
                            unit="L"
                        />
                        <MetricRow
                            label="FEV3"
                            value={fmt(measure.fev3)}
                            unit="L"
                        />
                        <MetricRow
                            label="FEV6"
                            value={fmt(measure.fev6)}
                            unit="L"
                        />
                    </div>
                    <div>
                        <div className="mb-2 font-semibold text-zinc-700">
                            Soggetto
                        </div>
                        <MetricRow
                            label="Genere"
                            value={measure.gender ?? '-'}
                        />
                        <MetricRow
                            label="Età"
                            value={
                                measure.age != null ? String(measure.age) : '-'
                            }
                            unit="anni"
                        />
                        <MetricRow
                            label="Altezza"
                            value={
                                measure.height != null
                                    ? String(measure.height)
                                    : '-'
                            }
                            unit="cm"
                        />
                        <MetricRow
                            label="Peso"
                            value={
                                measure.weight != null
                                    ? String(measure.weight)
                                    : '-'
                            }
                            unit="kg"
                        />
                        <MetricRow
                            label="Fumo"
                            value={
                                measure.smoking == null
                                    ? '-'
                                    : measure.smoking
                                      ? 'Sì'
                                      : 'No'
                            }
                        />
                        <MetricRow
                            label="Farmaci"
                            value={
                                measure.medication == null
                                    ? '-'
                                    : measure.medication
                                      ? 'Sì'
                                      : 'No'
                            }
                        />
                    </div>
                </div>

                {flowVolumeData.length > 0 && (
                    <SpirometryMetricChart
                        title="Curva flusso/volume"
                        data={flowVolumeData}
                        xLabel="Volume (L)"
                        yLabel="Flusso (L/s)"
                    />
                )}
                {volumeTimeData.length > 0 && (
                    <SpirometryMetricChart
                        title="Curva volume/tempo"
                        data={volumeTimeData}
                        xLabel="Tempo (s)"
                        yLabel="Volume (L)"
                        color="#69cac6"
                    />
                )}
            </div>
        );
    };

    return (
        <AuthenticatedLayout
            backLink={route('dashboard.personal', { target: patient.id })}
            backLinkLabel={backLinkLabel}
        >
            <Head title="Spirometria" />

            <div className="py-2">
                <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div className="overflow-hidden sm:rounded-lg">
                        <div className="p-6 text-gray-900">
                            <div className="scroll-m-20 pb-8 text-4xl font-semibold tracking-tight lg:text-5xl">
                                Spirometria
                            </div>
                            <div className="flex justify-center gap-2 md:justify-end">
                                <PrintButton />
                                <DayNavigator
                                    date={dayjs(date)}
                                    onChange={onDateChange}
                                    availableDates={availableDates}
                                />
                            </div>

                            {measures.length === 0 && (
                                <div className="mt-8 text-center text-zinc-500">
                                    Nessuna misura per la data selezionata.
                                </div>
                            )}

                            {measures.map(renderMeasure)}

                            <div className="flex w-full justify-center">
                                <div className="max-w-2xl">
                                    <div className="mt-8 text-zinc-500 print:hidden">
                                        La spirometria misura la funzionalità
                                        polmonare. FVC è la capacità vitale
                                        forzata, FEV1 il volume espirato nel
                                        primo secondo e FEV1/FVC il loro
                                        rapporto (indice di Tiffeneau, normale ≥
                                        70%). PEF è il picco di flusso
                                        espiratorio. La curva flusso/volume
                                        mostra il pattern espiratorio
                                        complessivo, utile a identificare
                                        ostruzioni o restrizioni.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}