import { Card, CardContent } from '@/components/ui/card';
import type { SendRow } from '@/types/automatisations';
import { Inbox } from 'lucide-react';
import type { Translate } from './labels';
import { PendingCard } from './PendingCard';

const NS = 'automatisations';

interface Props {
    pending: SendRow[];
    canApprove: boolean;
    now: Date;
    locale: string;
    t: Translate;
}

/** Tout ce qui attend un geste humain : à valider, puis les échecs à vérifier. */
export function PendingTab({ pending, canApprove, now, locale, t }: Props) {
    if (pending.length === 0) {
        return (
            <Card>
                <CardContent className="flex flex-col items-center gap-2 py-12 text-center">
                    <Inbox className="text-muted-foreground h-8 w-8" aria-hidden="true" />
                    <p className="font-medium">{t(NS, 'pending_empty_title', 'Rien à valider')}</p>
                    <p className="text-muted-foreground max-w-md text-sm">
                        {t(
                            NS,
                            'pending_empty',
                            'Les messages des règles « À valider » arrivent ici au moment prévu, avec les échecs à vérifier. Une cloche vous prévient.',
                        )}
                    </p>
                </CardContent>
            </Card>
        );
    }

    const approvals = pending.filter((send) => send.status === 'pending_approval');
    const failures = pending.filter((send) => send.status !== 'pending_approval');

    return (
        <div className="flex flex-col gap-4">
            {approvals.length > 0 && (
                <div className="grid gap-3 xl:grid-cols-2">
                    {approvals.map((send) => (
                        <PendingCard
                            key={`${send.id}-${send.status}-${send.updatedAt}`}
                            send={send}
                            canApprove={canApprove}
                            now={now}
                            locale={locale}
                            t={t}
                        />
                    ))}
                </div>
            )}
            {failures.length > 0 && (
                <section className="flex flex-col gap-2">
                    <h3 className="text-sm font-medium">{t(NS, 'failures_title', 'Échecs à vérifier')}</h3>
                    <div className="grid gap-3 xl:grid-cols-2">
                        {failures.map((send) => (
                            <PendingCard
                                key={`${send.id}-${send.status}-${send.updatedAt}`}
                                send={send}
                                canApprove={canApprove}
                                now={now}
                                locale={locale}
                                t={t}
                            />
                        ))}
                    </div>
                </section>
            )}
        </div>
    );
}