'use client';

import { useState } from 'react';
import Image from 'next/image';

interface InvitationCardProps {
  id: string;
  name: string;
  avatar: string;
  description: string;
  createdAt?: string;
  isProcessing?: boolean;
  onAccept?: (id: string) => void;
  onIgnore?: (id: string) => void;
}

// Format relative time
function formatRelativeTime(dateString: string): string {
  const date = new Date(dateString);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffMins = Math.floor(diffMs / (1000 * 60));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

  if (diffMins < 1) return 'Just now';
  if (diffMins < 60) return `${diffMins}m ago`;
  if (diffHours < 24) return `${diffHours}h ago`;
  if (diffDays < 7) return `${diffDays}d ago`;

  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

export function InvitationCard({
  id,
  name,
  avatar,
  description,
  createdAt,
  isProcessing = false,
  onAccept,
  onIgnore,
}: InvitationCardProps) {
  const [avatarLoaded, setAvatarLoaded] = useState(false);
  const [avatarError, setAvatarError] = useState(false);
  const placeholder = '/assets/icons/user-placeholder-icon.svg';
  const isPlaceholder = !avatar || avatar === placeholder;

  return (
    <div className={`flex flex-col sm:flex-row items-start sm:items-center gap-4 py-4 ${isProcessing ? 'opacity-50 pointer-events-none' : ''}`}>
      {/* Avatar */}
      <div className="flex-shrink-0">
        <div className="w-[80px] h-[80px] rounded-full overflow-hidden relative bg-[#e8e8e8]">
          {/* Shimmer while loading, initials only on error */}
          {avatarError || isPlaceholder ? (
            <div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
              <span className="font-bold text-[#00293d] text-[32px]">{name?.[0]?.toUpperCase() || '?'}</span>
            </div>
          ) : !avatarLoaded ? (
            <div className="absolute inset-0 rounded-full shimmer-loading" />
          ) : null}
          {avatar && !isPlaceholder && !avatarError && (
            <img
              ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}
              src={avatar}
              alt={name}
              className={`absolute inset-0 w-full h-full object-cover rounded-full transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
              onLoad={() => setAvatarLoaded(true)}
              onError={() => setAvatarError(true)}
            />
          )}
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0">
        {/* Name with time */}
        <div className="flex items-center gap-2 mb-1">
          <h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#00293D]">
            {name}
          </h3>
          {createdAt && (
            <span className="font-serif font-normal text-[12px] text-[#00293D]/50">
              • {formatRelativeTime(createdAt)}
            </span>
          )}
        </div>

        {/* Description/Message */}
        <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] line-clamp-2">
          {description}
        </p>
      </div>

      {/* Action Buttons */}
      <div className="flex items-center gap-3 flex-shrink-0">
        <button
          onClick={() => onIgnore?.(id)}
          disabled={isProcessing}
          className="h-[27px] px-4 rounded-[15px] border border-[#00293d] font-serif font-light text-[14px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Ignore
        </button>
        <button
          onClick={() => onAccept?.(id)}
          disabled={isProcessing}
          className="h-[27px] px-4 rounded-[15px] bg-[#e58625] font-fractul font-medium text-[14px] text-[#00293D] hover:bg-[#d47920] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isProcessing ? 'Processing...' : 'Accept'}
        </button>
      </div>
    </div>
  );
}
