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

/** FR-097: per-event performance — revenue, tickets sold, attendance rate in one table. */
export function EventPerformanceSection({
  data,
  exportUrl,
}: {
  data: EventPerformanceAnalytics;
  exportUrl?: string;
}) {
  return (
    <div>
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Event 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">Event</th>
              <th className="px-4 py-2">Revenue</th>
              <th className="px-4 py-2">Tickets Sold</th>
              <th className="px-4 py-2">Attendance Rate</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 event performance data yet.
                </td>
              </tr>
            )}
            {data.map((row) => (
              <tr key={row.event_id}>
                <td className="px-4 py-2">{row.title}</td>
                <td className="px-4 py-2 font-medium">{formatCurrency(row.revenue)}</td>
                <td className="px-4 py-2">{row.tickets_sold} tickets</td>
                <td className="px-4 py-2">{row.attendance_rate}%</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}