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

export function RevenueSection({ data, exportUrl }: { data: RevenueAnalytics; exportUrl?: string }) {
  const maxDaily = Math.max(1, ...data.daily.map((d) => Number(d.revenue)));

  return (
    <div>
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Revenue 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 Revenue</p>
        <p className="mt-1 text-2xl font-semibold">{formatCurrency(data.total_revenue)}</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)}: ${formatCurrency(d.revenue)}`}
                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, (Number(d.revenue) / 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 revenue 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">{formatCurrency(row.revenue)}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}