import type { TicketSalesAnalytics } from "@/types/analytics";
import { AnalyticsExportButtons } from "@/components/analytics/export-buttons";

export function TicketSalesSection({ data, exportUrl }: { data: TicketSalesAnalytics; exportUrl?: string }) {
  return (
    <div>
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Ticket Sales Analytics</h2>
        {exportUrl && <AnalyticsExportButtons baseUrl={exportUrl} />}
      </div>
      <div className="mt-3 rounded-xl border border-kolabora-neutral-dark/10 p-4">
        <p className="text-sm text-kolabora-neutral-dark/70">Total Tickets Sold</p>
        <p className="mt-1 text-2xl font-semibold">{data.total_sold}</p>
      </div>

      <div className="mt-4">
        <p className="text-sm font-medium text-kolabora-neutral-dark/70">Per Event</p>
        <div className="mt-2 flex flex-col divide-y divide-kolabora-neutral-dark/10 rounded-xl border border-kolabora-neutral-dark/10">
          {data.by_event.length === 0 && (
            <p className="px-4 py-6 text-center text-sm text-kolabora-neutral-dark/70">
              No tickets sold yet.
            </p>
          )}
          {data.by_event.map((row) => (
            <div key={row.event_id} className="flex items-center justify-between px-4 py-3 text-sm">
              <span>{row.title}</span>
              <span className="font-medium">{row.sold} tickets</span>
            </div>
          ))}
        </div>
      </div>

      <div className="mt-4">
        <p className="text-sm font-medium text-kolabora-neutral-dark/70">Per Ticket</p>
        <div className="mt-2 flex flex-col divide-y divide-kolabora-neutral-dark/10 rounded-xl border border-kolabora-neutral-dark/10">
          {data.by_ticket_type.length === 0 && (
            <p className="px-4 py-6 text-center text-sm text-kolabora-neutral-dark/70">
              No tickets sold yet.
            </p>
          )}
          {data.by_ticket_type.map((row) => (
            <div key={row.ticket_type_id} className="flex items-center justify-between px-4 py-3 text-sm">
              <div>
                <p>{row.name}</p>
                <p className="text-xs text-kolabora-neutral-dark/70">{row.event_title}</p>
              </div>
              <span className="font-medium">{row.sold} tickets</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}