import { useState, useEffect } from "react";
import { Link } from "react-router";
import { LuCalendar, LuClock, LuInfo } from "react-icons/lu";

interface Activity {
  activity_id: number;
  activity_title: string;
  activity_sc_end: string;
  activity_prio: string;
  activity_status: string;
  activity_author: {
    name: string;
  };
}

export default function UpcomingActivityList() {
  const [activities, setActivities] = useState<Activity[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/activities/upcoming", {
      credentials: "include",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setActivities(data);
        setLoading(false);
      })
      .catch((err) => {
        console.error("Failed to fetch upcoming activities:", err);
        setLoading(false);
      });
  }, []);

  const getPriorityConfig = (priority: string) => {
    switch (priority.toLowerCase()) {
      case "high":
      case "urgent":
      case "priority":
        return "bg-error-50 text-error-600 dark:bg-error-500/10 dark:text-error-500";
      case "medium":
      case "moderate":
        return "bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-500";
      case "low":
        return "bg-success-50 text-success-600 dark:bg-success-500/10 dark:text-success-500";
      default:
        return "bg-gray-50 text-gray-600 dark:bg-gray-500/10 dark:text-gray-400";
    }
  };

  const formatDeadline = (dateStr: string) => {
    const date = new Date(dateStr);
    const now = new Date();
    
    // Normalize dates to midnight to compare calendar days
    const d1 = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    const d2 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    
    const diffTime = d1.getTime() - d2.getTime();
    const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));

    if (diffDays === 0) return "Today";
    if (diffDays === 1) return "Tomorrow";
    if (diffDays < 0) return "Overdue";
    if (diffDays <= 7) return `In ${diffDays} days`;

    return date.toLocaleDateString("en-GB", {
      day: "numeric",
      month: "short",
    });
  };

  if (loading) {
    return (
      <div className="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
        <div className="flex items-center justify-center h-[300px]">
          <div className="w-8 h-8 border-4 border-brand-500 border-t-transparent rounded-full animate-spin"></div>
        </div>
      </div>
    );
  }

  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] sm:p-6 xl:h-[450px] flex flex-col">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
            Upcoming Activities
          </h3>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Next 5 activities with closest deadlines
          </p>
        </div>
        {/* View all removed from here */}
      </div>

      <div className="flex-1 overflow-y-auto custom-scrollbar pr-1">
        <div className="space-y-4">
          {activities.length > 0 ? (
            activities.map((activity) => (
            <Link
              key={activity.activity_id}
              to={`/activity/${activity.activity_id}`}
              className="group relative flex items-start gap-4 rounded-xl border border-gray-100 p-4 transition-all hover:border-brand-200 hover:bg-brand-50/30 dark:border-gray-800 dark:hover:border-brand-500/30 dark:hover:bg-brand-500/5"
            >
              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-50 text-gray-500 group-hover:bg-brand-100 group-hover:text-brand-600 dark:bg-gray-800 dark:text-gray-400 dark:group-hover:bg-brand-500/20 dark:group-hover:text-brand-400">
                <LuCalendar className="size-5" />
              </div>

              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between gap-2">
                  <h4 className="truncate text-sm font-semibold text-gray-800 dark:text-white/90">
                    {activity.activity_title}
                  </h4>
                  <span
                    className={`shrink-0 rounded-full px-2.5 py-0.5 text-[11px] font-medium uppercase tracking-wider ${getPriorityConfig(
                      activity.activity_prio
                    )}`}
                  >
                    {activity.activity_prio}
                  </span>
                </div>

                <div className="mt-2 flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
                  <div className="flex items-center gap-1.5">
                    <LuClock className="size-3.5" />
                    <span className={new Date(activity.activity_sc_end) < new Date() ? "text-error-500 font-medium" : ""}>
                      {formatDeadline(activity.activity_sc_end)}
                    </span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <div className="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600" />
                    <span className="truncate">{activity.activity_author.name}</span>
                  </div>
                </div>
              </div>
            </Link>
            ))
          ) : (
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-50 dark:bg-gray-800">
                <LuInfo className="size-7 text-gray-400" />
              </div>
              <p className="text-gray-500 dark:text-gray-400">No upcoming activities found</p>
            </div>
          )}
        </div>
      </div>

      {activities.length > 0 && (
        <div className="mt-6 pt-6 border-t border-gray-100 dark:border-gray-800">
          <Link 
            to="/working-tracking"
            className="flex items-center justify-center w-full rounded-lg bg-gray-50 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:hover:bg-white/10"
          >
            View All
          </Link>
        </div>
      )}
    </div>
  );
}