"use client";

import type { ActivityEvent } from "@/lib/activity";
import { ActivityItem } from "./ActivityItem";

interface Props {
  events: ActivityEvent[];
  collapsed: boolean;
  compact?: boolean;
  onToggleCollapse: () => void;
  onExpandPanel: () => void;
  onNodeClick: (nodeId: string) => void;
  onHandleClick?: (handle: string) => void;
}

/**
 * Compact always-visible activity card in the top-right of the graph canvas.
 * Shows latest 5 events. Click "See all" to open the full ActivityPanel.
 */
export function ActivityOverlay({
  events,
  collapsed,
  compact,
  onToggleCollapse,
  onExpandPanel,
  onNodeClick,
  onHandleClick,
}: Props) {
  // Count events in last 5 minutes for the collapsed badge
  const recentCount = events.filter(
    (e) => Date.now() - e.time < 5 * 60 * 1000
  ).length;

  if (collapsed) {
    return (
      <button
        onClick={onToggleCollapse}
        className="group flex items-center gap-2 px-3 py-2 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-full border border-zinc-200/80 dark:border-zinc-700/80 shadow-sm hover:bg-white dark:hover:bg-zinc-900 hover:shadow-md transition-all"
        title="Show activity feed"
      >
        <svg
          className="w-3.5 h-3.5 text-zinc-400 dark:text-zinc-500 group-hover:text-emerald-500 dark:group-hover:text-emerald-400 transition-colors"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
        >
          <circle cx="8" cy="8" r="6" />
          <polyline points="8,4 8,8 11,10" />
        </svg>
        <span className="text-xs text-zinc-500 dark:text-zinc-400 group-hover:text-zinc-700 dark:group-hover:text-zinc-200 transition-colors">Activity</span>
        {recentCount > 0 && (
          <span className="text-[10px] font-medium text-white bg-emerald-500 rounded-full px-1.5 py-0.5 min-w-[18px] text-center leading-tight">
            {recentCount}
          </span>
        )}
      </button>
    );
  }

  return (
    <div className={`${compact ? "w-60" : "w-72"} bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm rounded-xl border border-zinc-200/80 dark:border-zinc-700/80 shadow-lg overflow-hidden`}>
      {/* Header */}
      <div className="flex items-center justify-between px-3.5 py-2.5 border-b border-zinc-100/80 dark:border-zinc-800/80">
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
          <span className="text-[11px] font-semibold text-zinc-600 dark:text-zinc-400">
            Live Activity
          </span>
        </div>
        <button
          onClick={onToggleCollapse}
          className="text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors p-1 -mr-0.5 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800"
          title="Collapse"
        >
          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
          </svg>
        </button>
      </div>

      {/* Event list */}
      <div className="py-0.5 max-h-[260px] overflow-y-auto custom-scrollbar">
        {events.length === 0 ? (
          <div className="py-6 text-center">
            <svg className="w-5 h-5 text-zinc-200 dark:text-zinc-700 mx-auto mb-1.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
              <circle cx="8" cy="8" r="6" />
              <polyline points="8,4 8,8 11,10" />
            </svg>
            <p className="text-[11px] text-zinc-400 dark:text-zinc-500">No activity yet</p>
          </div>
        ) : (
          events.slice(0, compact ? 3 : 6).map((event, i) => (
            <div
              key={event.id}
              className={i === 0 ? "bg-emerald-50/30 dark:bg-emerald-950/30" : ""}
            >
              <ActivityItem
                event={event}
                variant="compact"
                onNodeClick={onNodeClick}
                onHandleClick={onHandleClick}
              />
            </div>
          ))
        )}
      </div>

      {/* Footer */}
      {events.length > 0 && (
        <div className="flex items-center justify-between px-3.5 py-2 border-t border-zinc-100/80 dark:border-zinc-800/80 bg-zinc-50/30 dark:bg-zinc-800/30">
          <span className="text-[10px] text-zinc-400 dark:text-zinc-500">
            {events.length} event{events.length !== 1 ? "s" : ""}
          </span>
          <button
            onClick={onExpandPanel}
            className="text-[11px] text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors font-medium flex items-center gap-1"
          >
            See all
            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </div>
      )}
    </div>
  );
}