"use client";

import { useActivityFeed } from "@/hooks/use-activity-feed";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import {
  CheckCircle2,
  PlusCircle,
  MessageSquare,
  Clock,
} from "lucide-react";
import type { ActivityItem } from "@/lib/supabase/database.types";

interface ActivityStatsContentProps {
  activities: ActivityItem[];
  loading: boolean;
}

export function ActivityStatsContent({ activities, loading }: ActivityStatsContentProps) {
  const stats = {
    completed: activities.filter((a) => a.type === "task_completed").length,
    created: activities.filter((a) => a.type === "task_created").length,
    comments: activities.filter((a) => a.type === "comment_added").length,
    total: activities.length,
  };

  const statItems = [
    {
      label: "Tasks Completed",
      value: stats.completed,
      icon: CheckCircle2,
      color: "text-green-500",
      bgColor: "bg-green-500/10",
    },
    {
      label: "Tasks Created",
      value: stats.created,
      icon: PlusCircle,
      color: "text-blue-500",
      bgColor: "bg-blue-500/10",
    },
    {
      label: "Comments",
      value: stats.comments,
      icon: MessageSquare,
      color: "text-purple-500",
      bgColor: "bg-purple-500/10",
    },
    {
      label: "Total Activity",
      value: stats.total,
      icon: Clock,
      color: "text-orange-500",
      bgColor: "bg-orange-500/10",
    },
  ];

  if (loading) {
    return (
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i}>
            <CardContent className="p-6">
              <Skeleton className="h-8 w-16 mb-2" />
              <Skeleton className="h-4 w-24" />
            </CardContent>
          </Card>
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
      {statItems.map((stat) => {
        const Icon = stat.icon;
        return (
          <Card key={stat.label}>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-2xl font-bold">{stat.value}</p>
                  <p className="text-sm text-muted-foreground">{stat.label}</p>
                </div>
                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${stat.bgColor}`}>
                  <Icon className={`w-5 h-5 ${stat.color}`} />
                </div>
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}

export function ActivityStats() {
  const { activities, loading } = useActivityFeed({ limit: 100 });
  return <ActivityStatsContent activities={activities} loading={loading} />;
}