'use client';

import { useQuery } from '@tanstack/react-query';
import api from '@/lib/api-client';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Activity, AlertTriangle, Clock, Users } from 'lucide-react';

export function SmartInsightsPanel() {
  const { data, isLoading } = useQuery({
    queryKey: ['smart-insights'],
    queryFn: async () => {
      const res = await api.get('/smart/insights');
      return res.data.insights;
    }
  });

  if (isLoading) return <div className="h-48 animate-pulse bg-slate-100 rounded-lg" />;
  if (!data) return null;

  return (
    <div className="space-y-6 mt-8">
      <div className="flex items-center gap-2">
        <Activity className="h-6 w-6 text-indigo-600" />
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white">System Intelligence</h2>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Top Users */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Most Active Users</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {data.top_users?.map((user: any, i: number) => (
                <div key={i} className="flex items-center justify-between text-sm">
                  <span className="font-medium">User #{user.user_id}</span>
                  <span className="text-slate-500">{user.actions} actions</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Slow Pages */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Performance Bottlenecks</CardTitle>
            <Clock className="h-4 w-4 text-amber-500" />
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {data.slow_pages?.map((page: any, i: number) => (
                <div key={i} className="flex items-center justify-between text-sm">
                  <span className="truncate max-w-[150px]" title={page.target}>{page.target}</span>
                  <span className="text-amber-600 font-medium">{Math.round(page.avg_duration)}ms</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Error Hotspots */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Error Hotspots</CardTitle>
            <AlertTriangle className="h-4 w-4 text-red-500" />
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {data.error_hotspots?.map((err: any, i: number) => (
                <div key={i} className="flex items-center justify-between text-sm">
                  <span className="truncate max-w-[150px]" title={err.target}>{err.target}</span>
                  <span className="text-red-600 font-bold">{err.error_count} errors</span>
                </div>
              ))}
              {(!data.error_hotspots || data.error_hotspots.length === 0) && (
                <div className="text-sm text-slate-500">No errors detected recently.</div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}