import type { EventPerformanceAnalytics } from "@/types/analytics";
import { formatCurrency } from "@/lib/format";
import { cardClasses } from "@/components/ui/styles";

export function AdminEventPerformanceTable({ data }: { data: EventPerformanceAnalytics }) {
  const rows = [...data].sort((a, b) => Number(b.revenue) - Number(a.revenue));

  return (
    <div className={cardClasses("p-4")}>
      <p className="text-sm font-medium text-kolabora-neutral-dark">Event Performance</p>
      <div className="scroll-fade-x mt-3 overflow-x-auto">
        <table className="w-full min-w-[480px] text-left text-sm">
          <thead className="text-xs uppercase text-kolabora-neutral-dark/50">
            <tr className="border-b border-kolabora-neutral-dark/10">
              <th className="py-2 pr-4 font-medium">Event</th>
              <th className="py-2 pr-4 font-medium">Revenue</th>
              <th className="py-2 pr-4 font-medium">Tickets Sold</th>
              <th className="py-2 font-medium">Attendance</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-kolabora-neutral-dark/10">
            {rows.length === 0 && (
              <tr>
                <td colSpan={4} className="py-6 text-center text-kolabora-neutral-dark/60">
                  No event performance data for this period yet.
                </td>
              </tr>
            )}
            {rows.map((row) => (
              <tr key={row.event_id}>
                <td className="py-2.5 pr-4 font-medium">{row.title}</td>
                <td className="py-2.5 pr-4">{formatCurrency(row.revenue)}</td>
                <td className="py-2.5 pr-4">{row.tickets_sold}</td>
                <td className="py-2.5">{row.attendance_rate.toLocaleString("en-US")}%</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}