import { useEffect, useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { useAuthor } from '@/hooks/useAuthor';
import { genUserName } from '@/lib/genUserName';
import type { ActivityItem } from './types';

interface RecentActivityListProps {
  data: ActivityItem[];
}

const ITEMS_PER_PAGE = 10;

function formatTimeAgo(timestamp: number): string {
  const seconds = Math.floor(Date.now() / 1000) - timestamp;
  if (seconds < 60) return `${seconds}s ago`;
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
  return `${Math.floor(seconds / 86400)}d ago`;
}

function ActivityRow({ item }: { item: ActivityItem }) {
  const author = useAuthor(item.pubkey);
  const metadata = author.data?.metadata;
  const displayName = metadata?.display_name || metadata?.name || genUserName(item.pubkey);
  const avatarUrl = metadata?.picture;

  const initials = displayName
    .split(' ')
    .map((w) => w[0])
    .slice(0, 2)
    .join('')
    .toUpperCase();

  return (
    <div className="flex items-center gap-3 py-2.5 border-b last:border-b-0">
      <Avatar className="size-8 shrink-0">
        {avatarUrl && <AvatarImage src={avatarUrl} alt={displayName} />}
        <AvatarFallback className="text-[10px] font-semibold">{initials}</AvatarFallback>
      </Avatar>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium truncate">{displayName}</span>
          <Badge variant="secondary" className="text-[10px] px-1.5 py-0 shrink-0">
            {item.regionLabel}
          </Badge>
        </div>
        <p className="text-xs text-muted-foreground truncate">{item.content}</p>
      </div>
      <span className="text-[10px] text-muted-foreground whitespace-nowrap shrink-0">
        {formatTimeAgo(item.created_at)}
      </span>
    </div>
  );
}

export function RecentActivityList({ data }: RecentActivityListProps) {
  const [page, setPage] = useState(0);

  // Clamp page when data shrinks.
  useEffect(() => {
    setPage((p) => Math.min(p, Math.max(0, Math.ceil(data.length / ITEMS_PER_PAGE) - 1)));
  }, [data.length]);

  const totalPages = Math.max(1, Math.ceil(data.length / ITEMS_PER_PAGE));
  const paged = data.slice(page * ITEMS_PER_PAGE, (page + 1) * ITEMS_PER_PAGE);

  return (
    <div className="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden">
      <div className="px-4 py-3 border-b bg-muted/30">
        <h3 className="text-sm font-medium text-muted-foreground">Recent Activity</h3>
      </div>

      <div className="px-4">
        {paged.map((item) => (
          <ActivityRow key={item.id} item={item} />
        ))}
      </div>

      {totalPages > 1 && (
        <div className="flex items-center justify-between px-4 py-3 border-t bg-muted/10">
          <span className="text-xs text-muted-foreground">
            Page {page + 1} of {totalPages}
          </span>
          <div className="flex gap-1.5">
            <Button size="sm" variant="outline" disabled={page === 0} onClick={() => setPage((p) => p - 1)}>
              <ChevronLeft className="size-3.5" />
            </Button>
            <Button size="sm" variant="outline" disabled={page >= totalPages - 1} onClick={() => setPage((p) => p + 1)}>
              <ChevronRight className="size-3.5" />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}
