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

/** FR-099: per-category stats — event count, revenue, tickets sold. */
export function CategorySection({ data, exportUrl }: { data: CategoryAnalytics; exportUrl?: string }) {
  return (
    <div>
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Category 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">Category</th>
              <th className="px-4 py-2">Event Count</th>
              <th className="px-4 py-2">Revenue</th>
              <th className="px-4 py-2">Tickets Sold</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-kolabora-neutral-dark/10">
            {data.length === 0 && (
              <tr>
                <td colSpan={4} className="px-4 py-6 text-center text-kolabora-neutral-dark/70">
                  No category data yet.
                </td>
              </tr>
            )}
            {data.map((row) => (
              <tr key={row.category_id}>
                <td className="px-4 py-2">{row.name}</td>
                <td className="px-4 py-2">{row.event_count}</td>
                <td className="px-4 py-2 font-medium">{formatCurrency(row.revenue)}</td>
                <td className="px-4 py-2">{row.tickets_sold} tickets</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}