import { useQuery } from "@tanstack/react-query"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"
import { analyticsService } from "@/services"

export default function AnalyticsUsersPage() {
  const { data: userGrowth, isLoading } = useQuery({
    queryKey: ['admin', 'analytics', 'users', 'growth'],
    queryFn: () => analyticsService.getUserGrowth(90),
  })

  return (
    <div className="space-y-6">
      <h2 className="text-3xl font-bold">User Analytics</h2>

      <Card>
        <CardHeader>
          <CardTitle>User Growth (Last 90 Days)</CardTitle>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="h-[400px] flex items-center justify-center">Loading...</div>
          ) : userGrowth && userGrowth.length > 0 ? (
            <ResponsiveContainer width="100%" height={400}>
              <LineChart data={userGrowth}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="total" stroke="#8884d8" name="Total Users" />
                <Line type="monotone" dataKey="admins" stroke="#82ca9d" name="Admins" />
                <Line type="monotone" dataKey="regular" stroke="#ffc658" name="Regular Users" />
              </LineChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-[400px] flex items-center justify-center text-muted-foreground">
              No data available
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}