AnalyticsPage.tsx

import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { adminApi } from '../../api/admin';
import { AppLayout } from '../../components/layout/AppLayout';
import { PageLoader } from '../../components/ui/LoadingSpinner';
import { StatCard } from '../../components/ui/StatCard';
import { Building2, DollarSign, TrendingUp, BarChart3 } from 'lucide-react';
import type { AnalyticsData } from '../../types';

export function AnalyticsPage() {
  const { data, isLoading } = useQuery<AnalyticsData>({
    queryKey: ['admin-analytics'],
    queryFn: () => adminApi.getAnalytics(),
  });

  if (isLoading) {
    return (
      <AppLayout title="Analytics">
        <PageLoader />
      </AppLayout>
    );
  }

  return (
    <AppLayout title="Analytics">
      <div className="mb-6">
        <h1 className="text-xl sm:text-2xl font-bold text-surface-900">Analytics</h1>
        <p className="mt-1 text-sm text-surface-500">
          Revenue trends, growth metrics, and portfolio performance
        </p>
      </div>

      {/* Summary Stats */}
      <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <StatCard
          title="Total Revenue"
          value={`$${data?.totalRevenue?.toLocaleString() ?? 0}`}
          icon={DollarSign}
          iconBg="bg-brand-100 text-brand-600"
        />
        <StatCard
          title="Avg. Revenue"
          value={`$${data?.avgRevenue?.toLocaleString() ?? 0}`}
          icon={TrendingUp}
          iconBg="bg-success/10 text-success"
        />
        <StatCard
          title="Organizations"
          value={data?.totalOrganizations ?? 0}
          icon={Building2}
          iconBg="bg-warning/10 text-warning"
        />
      </div>

      {/* Revenue Trend */}
      <div className="mb-8 rounded-xl border border-surface-200 bg-white p-4 sm:p-5">
        <div className="mb-4 flex items-center gap-2">
          <BarChart3 className="h-4 w-4 text-surface-500" />
          <h3 className="text-sm font-semibold text-surface-700">Revenue Trend</h3>
        </div>
        {data?.revenueTrend?.length === 0 ? (
          <div className="flex h-48 sm:h-64 items-center justify-center">
            <p className="text-sm text-surface-500">Revenue trend data coming soon</p>
          </div>
        ) : (
          <div className="h-48 sm:h-64">
            {/* Chart placeholder - Recharts would render here */}
            <div className="flex h-full items-end gap-2">
              {data?.revenueTrend?.map((point) => (
                <div key={point.month} className="flex-1">
                  <div
                    className="w-full rounded-t bg-brand-200"
                    style={{
                      height: `${Math.max((point.revenue / Math.max(...data.revenueTrend.map(p => p.revenue), 1)) * 100, 4)}%`,
                    }}
                  />
                  <p className="mt-1 text-center text-[10px] sm:text-xs text-surface-500">{point.month}</p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Top Organizations */}
      <div className="rounded-xl border border-surface-200 bg-white p-4 sm:p-5">
        <h3 className="mb-4 text-sm font-semibold text-surface-700">Top Organizations by Revenue</h3>
        {data?.topOrganizations?.length === 0 ? (
          <p className="text-sm text-surface-500">No organization data yet</p>
        ) : (
          <div className="space-y-3">
            {data?.topOrganizations?.map((org, idx) => (
              <div key={org.id} className="flex items-center gap-4 rounded-lg p-3 hover:bg-surface-50">
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 text-xs font-semibold text-brand-600">
                  {idx + 1}
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-medium text-surface-900 truncate">{org.name}</p>
                </div>
                <div className="text-right">
                  <p className="text-sm font-semibold text-surface-900">
                    ${org.revenue.toLocaleString()}
                  </p>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </AppLayout>
  );
}