import { Link, router } from '@inertiajs/react';
import AppLayout from '@/layouts/AppLayout';
import { useTranslator } from '@/lib/i18n';

interface Payment {
    id: string;
    gateway: string;
    plan: string;
    status: string;
    amount?: string | null;
    currency?: string | null;
    reference: string;
    created_at: string;
    user?: { name: string; email: string };
}

const STATUS_COLORS: Record<string, string> = {
    paid: 'bg-emerald-100 text-emerald-800',
    pending: 'bg-amber-100 text-amber-800',
    failed: 'bg-red-100 text-red-800',
};

export default function AdminPayments({ payments }: { payments: Payment[] }) {
    const t = useTranslator();
    return (
        <AppLayout>
            <div className="max-w-5xl mx-auto px-6 py-10">
                <div className="flex items-center gap-4 mb-2">
                    <Link href="/admin" className="text-muted-foreground hover:text-foreground">← {t('admin.back')}</Link>
                    <h1 className="font-serif text-3xl">{t('admin.payments_title')}</h1>
                </div>
                <Link href="/admin/payment-gateways" className="text-sm text-primary hover:underline">{t('admin.pg_title')} →</Link>

                <div className="overflow-x-auto mt-6">
                    <table className="w-full text-sm">
                        <thead>
                            <tr className="border-b border-border text-left text-muted-foreground">
                                <th className="pb-2 pr-4 font-medium">{t('admin.col_name')}</th>
                                <th className="pb-2 pr-4 font-medium">{t('vendors.category')}</th>
                                <th className="pb-2 pr-4 font-medium">{t('billing.eyebrow')}</th>
                                <th className="pb-2 pr-4 font-medium">{t('admin.col_status')}</th>
                                <th className="pb-2 pr-4 font-medium">{t('vendors.price_estimate')}</th>
                                <th className="pb-2" />
                            </tr>
                        </thead>
                        <tbody>
                            {payments.map(p => (
                                <tr key={p.id} className="border-b border-border/50">
                                    <td className="py-3 pr-4">
                                        <div className="font-medium">{p.user?.name ?? '—'}</div>
                                        <div className="text-xs text-muted-foreground">{p.user?.email}</div>
                                    </td>
                                    <td className="py-3 pr-4 capitalize">{p.gateway} · {t(`billing.${p.plan}`)}</td>
                                    <td className="py-3 pr-4 text-xs text-muted-foreground">{new Date(p.created_at).toLocaleDateString()}</td>
                                    <td className="py-3 pr-4">
                                        <span className={`px-2 py-0.5 rounded-full text-xs ${STATUS_COLORS[p.status] ?? 'bg-muted'}`}>{p.status}</span>
                                    </td>
                                    <td className="py-3 pr-4">{p.amount ? `${p.amount} ${p.currency ?? ''}` : '—'}</td>
                                    <td className="py-3">
                                        {p.gateway === 'offline' && p.status === 'pending' && (
                                            <button
                                                onClick={() => { if (confirm(t('admin.pay_approve_confirm'))) router.post(`/admin/payments/${p.id}/approve`, {}, { preserveScroll: true }); }}
                                                className="text-xs bg-primary text-primary-foreground px-3 py-1 rounded"
                                            >
                                                {t('admin.pay_approve')}
                                            </button>
                                        )}
                                    </td>
                                </tr>
                            ))}
                            {payments.length === 0 && (
                                <tr><td colSpan={6} className="text-center text-muted-foreground py-12">{t('admin.pay_empty')}</td></tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        </AppLayout>
    );
}