import React from 'react';
import { useUserActivity } from '@/lib/krowHooks';
import ActivityMetrics from '@/components/krow/ActivityMetrics';
import ActivityCharts from '@/components/krow/ActivityCharts';
import ActivityLogTable from '@/components/krow/ActivityLogTable';
import { Loader2 } from 'lucide-react';
import { AssistantTrigger } from '@/components/ai-assistant';

export default function UserTracking() {
  const { data: activities = [], isLoading } = useUserActivity();

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="w-6 h-6 text-[#9CA3AF] animate-spin" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-[22px] font-bold text-[#111827]">User Tracking</h1>
          <p className="text-[13px] text-[#6B7280] mt-0.5">
            Sign-ups, logins, and key actions across your platform
          </p>
        </div>
        <AssistantTrigger />
      </div>
      <ActivityMetrics activities={activities} />
      <ActivityCharts activities={activities} />
      <ActivityLogTable activities={activities} />
    </div>
  );
}