import { Link } from '@inertiajs/react';
import { Clock3 } from 'lucide-react';
import { formatDate } from '@/lib/format';
import { index as billingIndex } from '@/routes/billing';
import type { DashboardMetrics } from '@/types';

export default function CreditsPanel({
    credits,
}: {
    credits: DashboardMetrics['credits'];
}) {
    // The backend for this shape lands separately, so read every field defensively.
    const available = credits?.available ?? 0;
    const consumed = credits?.consumed_30d ?? 0;
    const expiringSoon = credits?.expiring_soon ?? 0;
    const expiringAt = credits?.expiring_at ?? null;

    return (
        <div className="space-y-4">
            <div>
                <p className="text-3xl leading-none font-semibold tabular-nums">
                    {available}
                </p>
                <p className="text-muted-foreground mt-1 text-sm">
                    {available === 1
                        ? 'credito disponibile'
                        : 'crediti disponibili'}
                </p>
            </div>

            {expiringSoon > 0 && (
                <p className="text-warning flex items-start gap-2 text-xs">
                    <Clock3 className="mt-px size-3.5 shrink-0" aria-hidden />
                    <span>
                        {expiringSoon}{' '}
                        {expiringSoon === 1
                            ? 'credito scade'
                            : 'crediti scadono'}
                        {expiringAt
                            ? ` il ${formatDate(expiringAt)}`
                            : ' a breve'}
                        . Crea un&apos;aula per{' '}
                        {expiringSoon === 1 ? 'usarlo' : 'usarli'}.
                    </span>
                </p>
            )}

            <p className="text-muted-foreground text-xs">
                <span className="tabular-nums">{consumed}</span>{' '}
                {consumed === 1 ? 'credito consumato' : 'crediti consumati'}{' '}
                negli ultimi 30 giorni
            </p>

            <Link
                href={billingIndex()}
                className="text-sm font-medium underline underline-offset-4"
            >
                Acquista crediti
            </Link>
        </div>
    );
}