import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Image from 'next/image';
import type { FeedItem } from '@gridpilot/social/domain/entities/FeedItem';
import { getDriverRepository, getImageService, getSocialRepository } from '@/lib/di-container';

function timeAgo(timestamp: Date): string {
  const diffMs = Date.now() - timestamp.getTime();
  const diffMinutes = Math.floor(diffMs / 60000);
  if (diffMinutes < 1) return 'Just now';
  if (diffMinutes < 60) return `${diffMinutes} min ago`;
  const diffHours = Math.floor(diffMinutes / 60);
  if (diffHours < 24) return `${diffHours} h ago`;
  const diffDays = Math.floor(diffHours / 24);
  return `${diffDays} d ago`;
}

async function resolveActor(item: FeedItem) {
  const driverRepo = getDriverRepository();
  const imageService = getImageService();
  const socialRepo = getSocialRepository();

  if (item.actorFriendId) {
    // Try social graph first (friend display name/avatar)
    try {
      const friend = await socialRepo.getFriendByDriverId?.(item.actorFriendId);
      if (friend) {
        return {
          name: friend.displayName ?? friend.driverName ?? `Driver ${item.actorFriendId}`,
          avatarUrl: friend.avatarUrl ?? imageService.getDriverAvatar(item.actorFriendId),
        };
      }
    } catch {
      // fall through to driver lookup
    }

    // Fallback to driver entity + image service
    try {
      const driver = await driverRepo.findById(item.actorFriendId);
      if (driver) {
        return {
          name: driver.name,
          avatarUrl: imageService.getDriverAvatar(driver.id),
        };
      }
    } catch {
      // ignore and return null below
    }
  }

  return null;
}

interface FeedItemCardProps {
  item: FeedItem;
}

export default function FeedItemCard({ item }: FeedItemCardProps) {
  const [actor, setActor] = useState<{ name: string; avatarUrl: string } | null>(null);

  useEffect(() => {
    let cancelled = false;

    void (async () => {
      const resolved = await resolveActor(item);
      if (!cancelled) {
        setActor(resolved);
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [item]);

  return (
    <div className="flex gap-4">
      <div className="flex-shrink-0">
        {actor ? (
          <div className="w-10 h-10 rounded-full overflow-hidden bg-charcoal-outline">
            <Image
              src={actor.avatarUrl}
              alt={actor.name}
              width={40}
              height={40}
              className="w-full h-full object-cover"
            />
          </div>
        ) : (
          <Card className="w-10 h-10 flex items-center justify-center rounded-full bg-primary-blue/10 border-primary-blue/40 p-0">
            <span className="text-xs text-primary-blue font-semibold">
              {item.type.startsWith('friend') ? 'FR' : 'LG'}
            </span>
          </Card>
        )}
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-start justify-between gap-2">
          <div>
            <p className="text-sm text-white">{item.headline}</p>
            {item.body && (
              <p className="text-xs text-gray-400 mt-1">{item.body}</p>
            )}
          </div>
          <span className="text-[11px] text-gray-500 whitespace-nowrap">
            {timeAgo(item.timestamp)}
          </span>
        </div>
        {item.ctaHref && item.ctaLabel && (
          <div className="mt-3">
            <Button
              as="a"
              href={item.ctaHref}
              variant="secondary"
              className="text-xs px-4 py-2"
            >
              {item.ctaLabel}
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}