import { Link } from '@inertiajs/react';
import { formatDateTime } from '@/lib/format';
import { edit as companyEdit } from '@/routes/company';
import type { DashboardMetrics } from '@/types';

export default function FormatempPanel({
    formatemp,
}: {
    formatemp: DashboardMetrics['formatemp'];
}) {
    const hasFailures = formatemp.failed_30d > 0;

    return (
        <div className="space-y-4">
            <dl className="grid grid-cols-2 gap-4">
                <div>
                    <dt className="text-muted-foreground text-xs">Riuscite</dt>
                    <dd className="text-2xl leading-none font-semibold tabular-nums">
                        {formatemp.success_30d}
                    </dd>
                </div>
                <div>
                    <dt className="text-muted-foreground text-xs">Fallite</dt>
                    <dd
                        className={
                            hasFailures
                                ? 'text-destructive text-2xl leading-none font-semibold tabular-nums'
                                : 'text-2xl leading-none font-semibold tabular-nums'
                        }
                    >
                        {formatemp.failed_30d}
                    </dd>
                </div>
            </dl>

            <p className="text-muted-foreground text-xs">
                Ultima sincronizzazione{' '}
                <span className="tabular-nums">
                    {formatemp.last_sync_at
                        ? formatDateTime(formatemp.last_sync_at)
                        : 'mai eseguita'}
                </span>
            </p>

            {hasFailures && (
                <p className="text-xs">
                    Controlla le credenziali in{' '}
                    <Link
                        href={companyEdit()}
                        className="font-medium underline underline-offset-4"
                    >
                        impostazioni azienda
                    </Link>
                    .
                </p>
            )}
        </div>
    );
}