import type { VoucherAnalytics } from "@/types/analytics";
import { formatCurrency } from "@/lib/format";
import { AnalyticsExportButtons } from "@/components/analytics/export-buttons";

/** FR-101: voucher usage — how many paid orders used each voucher, and total discount given. */
export function VoucherSection({ data, exportUrl }: { data: VoucherAnalytics; exportUrl?: string }) {
  return (
    <div>
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Voucher Analytics</h2>
        {exportUrl && <AnalyticsExportButtons baseUrl={exportUrl} />}
      </div>

      <div className="scroll-fade-x mt-3 overflow-x-auto rounded-xl border border-kolabora-neutral-dark/10">
        <table className="w-full text-left text-sm">
          <thead className="bg-kolabora-neutral-dark/5 text-xs uppercase text-kolabora-neutral-dark/70">
            <tr>
              <th className="px-4 py-2">Code</th>
              <th className="px-4 py-2">Event</th>
              <th className="px-4 py-2">Discount Amount</th>
              <th className="px-4 py-2">Used</th>
              <th className="px-4 py-2">Total Discount</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-kolabora-neutral-dark/10">
            {data.length === 0 && (
              <tr>
                <td colSpan={5} className="px-4 py-6 text-center text-kolabora-neutral-dark/70">
                  No vouchers yet.
                </td>
              </tr>
            )}
            {data.map((row) => (
              <tr key={row.voucher_id}>
                <td className="px-4 py-2 font-mono">{row.code}</td>
                <td className="px-4 py-2">{row.event_title ?? "-"}</td>
                <td className="px-4 py-2">{formatCurrency(row.discount_amount)}</td>
                <td className="px-4 py-2">{row.usage_count}x</td>
                <td className="px-4 py-2 font-medium">{formatCurrency(row.total_discount)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}