import DayNavigator from '@/Components/DayNavigator';
import ExportButton from '@/Components/ExportButton';
import PrintButton from '@/Components/PrintButton';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import LineMetricChart from '@/Pages/Metric/LineMetricChart';
import MetricMeasure from '@/Pages/Metric/MetricMeasure';
import MetricPeriodSummary from '@/Pages/Metric/MetricPeriodSummary';
import MetricSummaryCard from '@/Pages/Metric/MetricSummaryCard';
import { AggregatedMetricData, MetricPeriod, Temperature, User } from '@/types';
import { Head, router, usePage } from '@inertiajs/react';
import dayjs, { Dayjs } from 'dayjs';
import { useState } from 'react';

interface TemperatureMetricDetailProps {
    measures: Temperature[];
    measuresByHour: AggregatedMetricData[];
    patient: User;
    availableDates: string[];
    period: MetricPeriod | null;
    filters: { date: string };
}

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

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

    const onRangeChange = (from: Dayjs, to: Dayjs) => {
        router.get(
            route('temperature.detail', { patient: patient.id }),
            {
                from: from.format('YYYY-MM-DD'),
                to: to.format('YYYY-MM-DD'),
            },
            { preserveState: true, preserveScroll: true, replace: true },
        );
    };

    const periodData = period
        ? period.data.map((point) => ({
              date: dayjs(point.date).format(
                  period.byMonth ? 'MM/YYYY' : 'DD/MM',
              ),
              average: point.average,
              min: point.min,
              max: point.max,
          }))
        : [];

    const data = measuresByHour.map((measure) => ({
        date: dayjs(measure.date).format('HH:mm'),
        average: measure.average,
        min: measure.min,
        max: measure.max,
    }));

    const values = measures.map((m) => m.value);
    const min = values.length ? Math.min(...values) : null;
    const max = values.length ? Math.max(...values) : null;
    const avg = values.length
        ? Math.round((values.reduce((s, v) => s + v, 0) / values.length) * 10) /
          10
        : null;

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

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

            <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">
                                Temperatura corporea
                            </div>
                            <div className="flex justify-center gap-2 md:justify-end">
                                <PrintButton />
                                <ExportButton
                                    href={route('temperature.detail.export', {
                                        patient: patient.id,
                                    })}
                                />
                                <DayNavigator
                                    date={dayjs(date)}
                                    onChange={onDateChange}
                                    availableDates={availableDates}
                                    range={
                                        period
                                            ? {
                                                  from: dayjs(period.from),
                                                  to: dayjs(period.to),
                                              }
                                            : null
                                    }
                                    onRangeChange={onRangeChange}
                                />
                            </div>
                            <div>
                                <LineMetricChart
                                    data={period ? periodData : data}
                                />
                            </div>
                            <div className="flex w-full justify-center">
                                <div className="max-w-2xl">
                                    {period && (
                                        <MetricPeriodSummary
                                            average={
                                                period.summary
                                                    ? `${period.summary.average} °C`
                                                    : null
                                            }
                                            max={
                                                period.summary
                                                    ? `${period.summary.max} °C`
                                                    : null
                                            }
                                            min={
                                                period.summary
                                                    ? `${period.summary.min} °C`
                                                    : null
                                            }
                                            caption={
                                                period.summary
                                                    ? `${period.summary.count} misurazioni dal ${dayjs(period.from).format('DD/MM/YYYY')} al ${dayjs(period.to).format('DD/MM/YYYY')}`
                                                    : null
                                            }
                                        />
                                    )}
                                    {!period && (
                                        <div className="mt-8 flex flex-wrap gap-4">
                                            <MetricSummaryCard
                                                title="Massima"
                                                value={
                                                    max !== null
                                                        ? `${max} °C`
                                                        : undefined
                                                }
                                                className="bg-neutral-200"
                                            />
                                            <MetricSummaryCard
                                                title="Minima"
                                                value={
                                                    min !== null
                                                        ? `${min} °C`
                                                        : undefined
                                                }
                                                className="bg-neutral-100"
                                            />
                                            <MetricSummaryCard
                                                title="Media"
                                                value={
                                                    avg !== null
                                                        ? `${avg} °C`
                                                        : undefined
                                                }
                                                className="bg-neutral-100"
                                            />
                                        </div>
                                    )}
                                    <div className="mt-8 text-zinc-500">
                                        La temperatura corporea normale è
                                        compresa tra 36,1 °C e 37,2 °C. Valori
                                        superiori a 38 °C indicano febbre. Il
                                        monitoraggio continuo permette di
                                        rilevare variazioni anche lievi che
                                        possono segnalare infezioni o
                                        alterazioni dello stato di salute.
                                    </div>
                                    {!period && (
                                        <div className="mt-8">
                                            <h2 className="mb-4 font-semibold">
                                                Misurazioni
                                            </h2>
                                            <ul>
                                                {measures.map((measure) => (
                                                    <MetricMeasure
                                                        key={measure.id}
                                                        value={`${measure.value} °C`}
                                                        measuredAt={dayjs(
                                                            measure.measured_at,
                                                        )}
                                                        deviceName={
                                                            measure.device_label ??
                                                            measure.device_name
                                                        }
                                                    />
                                                ))}
                                            </ul>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
