import { prisma } from '@/lib/prisma';
import { redirect } from 'next/navigation';
import { PAYMENTS_ENABLED } from '@/lib/features';
import { requireRole } from '@/lib/auth/dal';
import { markCommissionPaid } from '@/app/actions/affiliate';
import { ShellPage } from '@/components/layout/DashboardPage';
import { SubmitButton } from '@/components/ui/Field';
import { INTL_LOCALE } from '@/i18n/config';
import { getLocale, getMessages } from '@/i18n/server';
import { cn } from '@/lib/cn';

export default async function AffiliateAdminPage() {
  await requireRole(['SUPER_ADMIN'], '/admin/afiliasi');
  if (!PAYMENTS_ENABLED) redirect('/admin');
  const locale = await getLocale();
  const all = await getMessages();
  const t = all.affiliate;
  const money = (n: number) => t.price(n.toLocaleString(INTL_LOCALE[locale]));
  const dateFmt = new Intl.DateTimeFormat(INTL_LOCALE[locale], { day: 'numeric', month: 'short', year: 'numeric' });

  const [commissions, sales] = await Promise.all([
    prisma.commission.findMany({
      orderBy: [{ status: 'asc' }, { createdAt: 'desc' }],
      take: 200,
      include: {
        affiliate: { select: { code: true, payoutAccount: true, user: { select: { name: true, email: true } } } },
        order: { select: { amount: true, user: { select: { name: true } } } },
      },
    }),
    prisma.order.aggregate({ where: { status: 'PAID' }, _sum: { amount: true }, _count: true }),
  ]);
  const total = (status: 'PENDING' | 'PAID') =>
    commissions.filter((c) => c.status === status).reduce((a, c) => a + c.amount, 0);

  return (
    <ShellPage>
      <p className="eyebrow text-subtle">Super Admin</p>
      <h1 className="mt-4 text-[32px] leading-tight font-semibold tracking-[-0.02em] text-ink">{t.admin.title}</h1>
      <p className="mt-2 max-w-lg text-[15px] text-muted">{t.admin.text}</p>

      <dl className="mt-8 grid grid-cols-3 gap-px overflow-hidden rounded-card bg-line shadow-card ring-1 ring-line">
        {[
          [t.admin.totals.pending, money(total('PENDING'))],
          [t.admin.totals.paid, money(total('PAID'))],
          [t.admin.totals.sales, `${sales._count} · ${money(sales._sum.amount ?? 0)}`],
        ].map(([label, value]) => (
          <div key={label} className="bg-surface p-5">
            <dt className="text-[13px] text-muted">{label}</dt>
            <dd className="mt-2 text-xl font-semibold tracking-tight text-ink tabular-nums">{value}</dd>
          </div>
        ))}
      </dl>

      {commissions.length === 0 ? (
        <p className="mt-6 rounded-card bg-surface px-6 py-12 text-center text-sm text-muted shadow-card ring-1 ring-line/70">
          {t.admin.empty}
        </p>
      ) : (
        <div className="mt-6 overflow-x-auto rounded-card bg-surface shadow-card ring-1 ring-line/70">
          <table className="w-full min-w-[760px] text-left text-sm">
            <thead className="border-b border-line text-[12px] text-subtle">
              <tr>
                {[t.admin.cols.affiliate, t.admin.cols.buyer, t.admin.cols.amount, t.admin.cols.account, t.admin.cols.date, t.admin.cols.status].map(
                  (h) => (
                    <th key={h} scope="col" className="px-5 py-3 font-medium">
                      {h}
                    </th>
                  ),
                )}
              </tr>
            </thead>
            <tbody className="divide-y divide-line">
              {commissions.map((c) => (
                <tr key={c.id}>
                  <td className="px-5 py-3.5">
                    <p className="font-semibold text-ink">{c.affiliate.user.name}</p>
                    <p className="text-xs text-muted">
                      {c.affiliate.code} · {c.affiliate.user.email}
                    </p>
                  </td>
                  <td className="px-5 py-3.5 text-ink-soft">{c.order.user.name}</td>
                  <td className="px-5 py-3.5 font-medium text-ink tabular-nums">
                    {money(c.amount)} <span className="text-xs text-subtle">({c.ratePercent}%)</span>
                  </td>
                  <td className="max-w-[220px] px-5 py-3.5 text-[13px] text-ink-soft">
                    {c.affiliate.payoutAccount ?? <span className="text-subtle">{t.admin.noAccount}</span>}
                  </td>
                  <td className="px-5 py-3.5 text-muted tabular-nums">{dateFmt.format(c.createdAt)}</td>
                  <td className="px-5 py-3.5">
                    {c.status === 'PENDING' ? (
                      <form action={markCommissionPaid}>
                        <input type="hidden" name="id" value={c.id} />
                        <SubmitButton className="h-9 w-auto px-4 text-[13px]">{t.admin.markPaid}</SubmitButton>
                      </form>
                    ) : (
                      <span className={cn('text-[13px]', c.status === 'PAID' ? 'text-wood' : 'text-subtle')}>
                        {t.dashboard.statusLabel[c.status]}
                        {c.paidAt && ` · ${dateFmt.format(c.paidAt)}`}
                      </span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </ShellPage>
  );
}