import { Link } from '@inertiajs/react';
import type { Page, ReceiptProgress } from '@/types/inventory';
import { quantity, receiptStates } from '@/types/inventory';

export function InventoryNotice() {
    return (
        <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100">
            Ambiente de desenvolvimento. Não autoriza compras reais.{' '}
            <strong>O orçamento ainda não é validado.</strong>
        </div>
    );
}
export function ReceiptProgressTable({
    progress,
}: {
    progress: ReceiptProgress;
}) {
    return (
        <>
            <p className="mb-4 text-sm font-semibold">
                {receiptStates[progress.state]}
                {progress.has_divergences
                    ? ' · Existem divergências de qualidade'
                    : ''}
            </p>
            <div className="overflow-x-auto">
                <table className="w-full text-left text-sm">
                    <thead className="border-b text-muted-foreground">
                        <tr>
                            <th className="pr-4 pb-3">Artigo</th>
                            <th className="pr-4">Autorizado</th>
                            <th className="pr-4">Recebido</th>
                            <th className="pr-4">Aceite</th>
                            <th className="pr-4">Rejeitado</th>
                            <th className="pr-4">Por entregar</th>
                            <th>Por aceitar</th>
                        </tr>
                    </thead>
                    <tbody>
                        {progress.lines.map((line) => (
                            <tr
                                key={line.id}
                                className="border-b last:border-0"
                            >
                                <td className="py-4 pr-4">
                                    <strong>{line.description}</strong>
                                    <p className="mt-1 text-xs text-muted-foreground">
                                        {line.unit}
                                    </p>
                                </td>
                                {[
                                    line.ordered_milli,
                                    line.received_milli,
                                    line.accepted_milli,
                                    line.rejected_milli,
                                    line.delivery_pending_milli,
                                    line.acceptance_pending_milli,
                                ].map((value, index) => (
                                    <td
                                        key={index}
                                        className="pr-4 whitespace-nowrap"
                                    >
                                        {quantity(value)}
                                    </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </>
    );
}
export function InventoryPagination<T>({ page }: { page: Page<T> }) {
    return (
        <div className="mt-4 flex gap-4 text-sm text-teal-700 dark:text-teal-400">
            {page.prev_page_url && (
                <Link href={page.prev_page_url}>Anterior</Link>
            )}
            {page.next_page_url && (
                <Link href={page.next_page_url}>Seguinte</Link>
            )}
        </div>
    );
}