"use client";
import React, { useState, useEffect } from "react";
import { Activity, Users, FolderKanban, CheckCircle2, AlertTriangle, Clock, MessageSquare, Paperclip, Filter, Search, Edit3 } from "lucide-react";
import { apiGet } from "@/lib/axios";

type ActivityCategory = "All" | "TaskUpdates" | "StatusChanges" | "TeamAssignments" | "Comments" | "FileUploads" | "ProjectMods";

interface ActivityLogItem {
  id: number;
  category: Exclude<ActivityCategory, "All">;
  action: string;
  details: string;
  user: string;
  time: string;
  date: string;
  icon: React.ReactNode;
}

export default function ActivityLogPage() {
  const [activeFilter, setActiveFilter] = useState<ActivityCategory>("All");
  const [searchQuery, setSearchQuery] = useState("");

  const [logsFromApi, setLogsFromApi] = useState<ActivityLogItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(false);

  const getIconForCategory = (category: string) => {
    switch (category) {
      case "StatusChanges": return <CheckCircle2 size={16} className="text-blue-500" />;
      case "FileUploads": return <Paperclip size={16} className="text-purple-500" />;
      case "Comments": return <MessageSquare size={16} className="text-green-500" />;
      case "TaskUpdates": return <Edit3 size={16} className="text-orange-500" />;
      case "TeamAssignments": return <Users size={16} className="text-indigo-500" />;
      case "ProjectMods": return <FolderKanban size={16} className="text-red-500" />;
      default: return <Activity size={16} className="text-gray-500" />;
    }
  };

  const formatTime = (isoString: string) => {
    const d = new Date(isoString);
    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };

  const formatDate = (isoString: string) => {
    const d = new Date(isoString);
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);

    if (d.toDateString() === today.toDateString()) return "Today";
    if (d.toDateString() === yesterday.toDateString()) return "Yesterday";
    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  };

  useEffect(() => {
    const fetchLogs = async () => {
      if (page === 1) setLoading(true);
      try {
        // Since filters now have no spaces, we can use it directly
        const typeQuery = activeFilter;
        const res = await apiGet<any>(`/api/activity-log?type=${typeQuery}&page=${page}&limit=10`);
        
        if (res?.success && res.data?.items) {
          const mappedLogs: ActivityLogItem[] = res.data.items.map((item: any) => ({
            id: item.id,
            category: item.badge as Exclude<ActivityCategory, "All">,
            action: item.title,
            details: item.description,
            user: item.user?.name || "System",
            time: formatTime(item.timestamp),
            date: formatDate(item.timestamp),
            icon: getIconForCategory(item.badge)
          }));
          
          if (page === 1) {
            setLogsFromApi(mappedLogs);
          } else {
            setLogsFromApi(prev => {
              // Avoid duplicates if same data arrives
              const newLogs = mappedLogs.filter(m => !prev.some(p => p.id === m.id));
              return [...prev, ...newLogs];
            });
          }
          
          if (res.data.pagination) {
            setHasMore(res.data.pagination.page < res.data.pagination.totalPages);
          }
        }
      } catch (err) {
        console.error("Error fetching activity logs:", err);
      } finally {
        setLoading(false);
      }
    };
    fetchLogs();
  }, [activeFilter, page]);

  const filters: ActivityCategory[] = [
    "All", "TaskUpdates", "StatusChanges", "TeamAssignments", "Comments", "FileUploads", "ProjectMods"
  ];

  const filteredLogs = logsFromApi.filter(log => {
    const matchesFilter = activeFilter === "All" || log.category === activeFilter;
    const matchesSearch = log.action?.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          log.details?.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          log.user?.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesFilter && matchesSearch;
  });

  // Group by date
  const groupedLogs = filteredLogs.reduce((acc, log) => {
    if (!acc[log.date]) {
      acc[log.date] = [];
    }
    acc[log.date].push(log);
    return acc;
  }, {} as Record<string, ActivityLogItem[]>);

  return (
    <>
      <div className="min-h-screen">
        <div className="mx-auto max-w-[1500px] space-y-6">
          <div className="mb-6">
            <h1 className="text-xl lg:text-2xl font-medium text-brand-950">System Activity Log</h1>
          </div>
          <div className="rounded-xl bg-white p-6 shadow-theme-md">
            <div className="flex flex-wrap sm:flex-nowrap rounded-lg bg-gray-100 gap-2 p-1 mb-5 sm:whitespace-nowrap sm:overflow-x-auto">
              {filters.map((filter) => (
                <button
                  key={filter}
                  onClick={() => {
                    setActiveFilter(filter);
                    setPage(1);
                  }}
                  className={`text-base font-medium transition-colors relative px-4 py-2 rounded-md w-full sm:w-auto ${activeFilter === filter ? "text-brand-950 bg-white shadow-sm" : "text-gray-500 bg-transparent hover:bg-gray-200/50"}`}
                >
                  {filter}
                </button>
              ))}
            </div>

              <div className="border border-gray-200 rounded-lg min-h-[400px]">
                <div className="p-6 sm:p-8">
                  {loading ? (
                    <div className="text-center py-12">
                      <div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-gray-300 border-t-brand-950 mb-3"></div>
                      <h3 className="text-lg font-medium text-gray-900">Loading activity...</h3>
                    </div>
                  ) : Object.keys(groupedLogs).length === 0 ? (
                    <div className="text-center py-12">
                      <Activity className="mx-auto h-12 w-12 text-gray-300 mb-3" />
                      <h3 className="text-lg font-medium text-gray-900">No activities found</h3>
                      <p className="text-sm text-gray-500 mt-1">Try adjusting your filters or check back later.</p>
                    </div>
                  ) : (
                    <div className="relative border-l-2 border-gray-100 ml-4 space-y-10">
                      {Object.entries(groupedLogs).map(([date, logs], groupIndex) => (
                        <div key={date} className="relative">
                          {/* Date Group Heading */}
                          <div className="absolute -left-[5px] top-1.5 h-3 w-3 rounded-full bg-brand-950 ring-4 ring-white"></div>
                          <h3 className="ml-6 text-sm font-bold text-gray-800 uppercase tracking-wider mb-6">
                            {date}
                          </h3>
                          
                          <div className="space-y-6 ml-6">
                            {logs.map((log) => (
                              <div key={log.id} className="relative group">
                                <div className="absolute -left-[45px] mt-1 w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center border border-gray-100">
                                  {log.icon}
                                </div>
                                <div className="bg-gray-50 rounded-lg p-4">
                                  <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-2">
                                    <div>
                                      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-1 sm:gap-2">
                                        <h4 className="text-sm font-medium text-brand-950">{log.action}</h4>
                                        <span className="px-2 py-0.5 rounded-xs bg-gray-200 text-gray-500 text-xs font-normal tracking-wider">
                                          {log.category}
                                        </span>
                                      </div>
                                      <p className="text-sm text-gray-500 mt-2 sm:mt-1">{log.details}</p>
                                    </div>
                                    <div className="flex items-center gap-1.5 text-xs text-gray-500 shrink-0">
                                      <Clock size={12} />
                                      {log.time}
                                    </div>
                                  </div>
                                  <div className="flex items-center gap-2 mt-3 pt-3 border-t border-gray-50">
                                    <div className="w-5 h-5 rounded-full bg-brand-950/20 text-brand-950 flex items-center justify-center text-xs font-medium">
                                      {log.user.charAt(0)}
                                    </div>
                                    <span className="text-sm font-medium text-brand-950">{log.user}</span>
                                  </div>
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

              {hasMore && (
                <div className="p-4 border-t border-gray-200 text-center">
                  {loading && page > 1 ? (
                    <div className="inline-block animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-brand-950"></div>
                  ) : (
                    <button 
                      onClick={() => setPage(p => p + 1)}
                      disabled={loading}
                      className="text-sm font-medium text-brand-950 hover:text-brand-950 underline disabled:opacity-50"
                    >
                      Load More Activity
                    </button>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}