"use client";

import { useEffect, useRef, useMemo } from "react";
import { formatAddress } from "@/lib/utils";
import { format } from "date-fns";
import { gsap } from "gsap";

interface Transaction {
  id: string;
  proposalId: number;
  to: string;
  value: string;
  status: "pending" | "executed" | "rejected";
  createdAt: Date;
}

export function RecentActivity() {
  // TODO: Fetch recent transactions from backend/indexer
  const transactions = useMemo<Transaction[]>(() => [], []); // Placeholder
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current && transactions.length > 0) {
      const items = containerRef.current.children;
      gsap.from(items, {
        opacity: 0,
        x: -20,
        duration: 0.5,
        stagger: 0.1,
        ease: "power2.out",
      });
    }
  }, [transactions]);

  return (
    <div>
      <h2 className="text-2xl font-semibold mb-4">Recent Activity</h2>
      <div className="bg-gray-900 rounded-xl p-6">
        {transactions.length === 0 ? (
          <div className="text-center py-8 text-gray-400">
            No recent transactions
          </div>
        ) : (
          <div ref={containerRef} className="space-y-4">
            {transactions.map((tx) => (
              <div
                key={tx.id}
                className="bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-gray-600 transition-colors"
              >
                <div className="flex justify-between items-start">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <span className="text-sm font-mono text-gray-400">
                        #{tx.proposalId}
                      </span>
                      <span
                        className={`px-2 py-1 rounded text-xs font-semibold ${
                          tx.status === "executed"
                            ? "bg-green-900/30 text-green-400"
                            : tx.status === "pending"
                            ? "bg-yellow-900/30 text-yellow-400"
                            : "bg-red-900/30 text-red-400"
                        }`}
                      >
                        {tx.status}
                      </span>
                    </div>
                    <div className="text-sm text-gray-300">
                      <span className="text-gray-500">To:</span> {formatAddress(tx.to)}
                    </div>
                    <div className="text-sm text-gray-400 mt-1">
                      {format(new Date(tx.createdAt), "MMM dd, yyyy HH:mm")}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-lg font-semibold">{tx.value} ETH</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}