"use client";

import { useSelector } from "react-redux";
import type { RootState } from "@/state/store";

export default function RecentActivityList() {
  const { activities, loading } = useSelector((state: RootState) => state.dashboard);

  return (
    <div className="flex h-[420px] min-w-0 flex-col overflow-hidden rounded-xl border border-[#E4E7EC] bg-white">
      <div className="flex-shrink-0 border-b border-[#E4E7EC] px-5 py-4">
        <h2 className="text-[16px] font-semibold text-[#101828]">Recent Activity</h2>
      </div>

      {loading.activities ? (
        <div className="space-y-4 p-5">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="space-y-1">
              <div className="h-4 w-40 animate-pulse rounded bg-[#F2F4F7]" />
              <div className="h-3 w-64 animate-pulse rounded bg-[#F2F4F7]" />
            </div>
          ))}
        </div>
      ) : activities.length === 0 ? (
        <div className="flex h-full items-center justify-center p-8 text-center text-[13px] text-[#667085]">
          No recent activity logged yet.
        </div>
      ) : (
        <ul className="thin-scrollbar min-h-0 flex-1 overflow-y-auto">
          {activities.map((activity, index) => {
            const heading = activity.entityName || activity.title || activity.module || "Activity";
            const timeFormatted =
              activity.timeAgo ||
              activity.time ||
              (activity.createdAt
                ? new Date(activity.createdAt).toLocaleTimeString([], {
                    hour: "2-digit",
                    minute: "2-digit",
                  })
                : "");

            return (
              <li
                key={activity.id || `${heading}-${index}`}
                className="flex items-start justify-between gap-4 border-b border-[#F2F4F7] px-5 py-3.5 last:border-b-0"
              >
                <div className="min-w-0">
                  <p className="text-[14px] font-medium text-[#101828]">{heading}</p>
                  <p className="mt-0.5 text-[13px] text-[#667085]">{activity.description}</p>
                </div>
                {timeFormatted && (
                  <span className="whitespace-nowrap text-[12px] text-[#98A2B3]">{timeFormatted}</span>
                )}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}