import { useEffect, useState } from "react";
import axios from "axios";
import {
  ArrowUpIcon,
  BoxIconLine,
  GroupIcon,
} from "../../icons";
import Badge from "../ui/badge/Badge";

interface MetricsData {
  total: number;
  totalToday: number;
  onGoing: number;
  onGoingToday: number;
  pending: number;
  pendingToday: number;
}

export default function ActivityMetrics() {
  const [metrics, setMetrics] = useState<MetricsData>({
    total: 0,
    totalToday: 0,
    onGoing: 0,
    onGoingToday: 0,
    pending: 0,
    pendingToday: 0,
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchMetrics = async () => {
      try {
        const response = await axios.get("/api/activities/metrics");
        setMetrics(response.data);
      } catch (error) {
        console.error("Error fetching metrics:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchMetrics();
  }, []);

  if (loading) {
    return (
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 md:gap-6">
        {[...Array(3)].map((_, i) => (
          <div key={i} className="flex items-center gap-4 p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] md:p-6 animate-pulse">
            <div className="w-12 h-12 bg-gray-200 rounded-xl dark:bg-gray-700 shrink-0"></div>
            <div className="flex flex-col gap-2 w-full">
              <div className="h-4 bg-gray-200 rounded w-24 dark:bg-gray-700"></div>
              <div className="h-6 bg-gray-200 rounded w-16 dark:bg-gray-700"></div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 md:gap-6">
      {/* <!-- Metric Item Start --> */}
      <div className="flex items-center justify-between gap-4 p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
        <div className="flex items-center gap-4">
          <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-xl dark:bg-gray-800 shrink-0">
            <GroupIcon className="text-gray-800 size-6 dark:text-white/90" />
          </div>

          <div className="flex flex-col">
            <span className="text-sm text-gray-500 dark:text-gray-400">
              Total Activities
            </span>
            <h4 className="font-bold text-gray-800 text-title-sm dark:text-white/90">
              {metrics.total}
            </h4>
          </div>
        </div>

        <Badge color="success">
          <ArrowUpIcon />
          {metrics.totalToday} Today
        </Badge>
      </div>
      {/* <!-- Metric Item End --> */}

      {/* <!-- Metric Item Start --> */}
      <div className="flex items-center justify-between gap-4 p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
        <div className="flex items-center gap-4">
          <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-xl dark:bg-gray-800 shrink-0">
            <BoxIconLine className="text-gray-800 size-6 dark:text-white/90" />
          </div>
          <div className="flex flex-col">
            <span className="text-sm text-gray-500 dark:text-gray-400">
              On Going Activities
            </span>
            <h4 className="font-bold text-gray-800 text-title-sm dark:text-white/90">
              {metrics.onGoing}
            </h4>
          </div>
        </div>

        <Badge color="success">
          <ArrowUpIcon />
          {metrics.onGoingToday} Today
        </Badge>
      </div>
      {/* <!-- Metric Item End --> */}

      <div className="flex items-center justify-between gap-4 p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
        <div className="flex items-center gap-4">
          <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-xl dark:bg-gray-800 shrink-0">
            <BoxIconLine className="text-gray-800 size-6 dark:text-white/90" />
          </div>
          <div className="flex flex-col">
            <span className="text-sm text-gray-500 dark:text-gray-400">
              Pending Activities
            </span>
            <h4 className="font-bold text-gray-800 text-title-sm dark:text-white/90">
              {metrics.pending}
            </h4>
          </div>
        </div>

        <Badge color="success">
          <ArrowUpIcon />
          {metrics.pendingToday} Today
        </Badge>
      </div>
    </div>
  );
}