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

/** FR-098: participant headcount — total, daily issuance trend, per-event breakdown. */
export function ParticipantSection({ data, exportUrl }: { data: ParticipantAnalytics; exportUrl?: string }) {
  const maxDaily = Math.max(1, ...data.daily.map((d) => d.total));

  return (
    <div>
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Participant 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 Participants</p>
        <p className="mt-1 text-2xl font-semibold">{data.total_participants}</p>
      </div>

      {data.daily.length > 0 && (
        <div className="mt-4">
          <p className="text-sm font-medium text-kolabora-neutral-dark/70">Last 30 Days Trend</p>
          <div className="scroll-fade-x mt-2 flex items-end gap-1 overflow-x-auto rounded-xl border border-kolabora-neutral-dark/10 p-4">
            {data.daily.map((d) => (
              <div
                key={d.date}
                title={`${formatDate(d.date)}: ${d.total} participants`}
                className="flex w-4 shrink-0 flex-col items-center justify-end"
                style={{ height: "120px" }}
              >
                <div
                  className="w-full rounded-t bg-kolabora-primary/70"
                  style={{ height: `${Math.max(4, (d.total / maxDaily) * 100)}%` }}
                />
              </div>
            ))}
          </div>
        </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 participants 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.participants} participants</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}