import { formatMoney } from '@navi/ui';
import { AccessDenied } from '../../../components/AccessDenied';
import { EmptyState, PageHeader, StatusBadge } from '../../../components/DashboardPrimitives';
import { dashboardApi } from '../../../lib/api';
import type { DashboardRefund } from '../../../lib/dashboardTypes';
import { requireDashboardRoute } from '../../../lib/permissions';

export default async function Refunds() {
  const gate = await requireDashboardRoute('/refunds');
  if (!gate.allowed) return <AccessDenied required={gate.required} />;
  const refunds = (await dashboardApi<DashboardRefund[]>('/refunds')) ?? [];

  return (
    <div className="stack">
      <PageHeader title="Refunds" eyebrow="Finance operations" />
      <div className="card">
        {refunds.length ? (
          <div className="table-wrap">
            <table className="table">
              <thead><tr><th>ID</th><th>Payment</th><th>Status</th><th>Amount</th><th>Reason</th></tr></thead>
              <tbody>
                {refunds.map((refund) => (
                  <tr key={refund.id}>
                    <td className="mono">{refund.id}</td>
                    <td className="mono">{refund.paymentId}</td>
                    <td><StatusBadge value={refund.status} /></td>
                    <td>{formatMoney(refund.amount, 'en')}</td>
                    <td>{refund.reason}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState title="No refund requests" body="Refund rows come directly from the API. Requests will appear here after travelers or support submit them." />
        )}
      </div>
    </div>
  );
}