'use client';

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

interface ConnectionCardProps {
  id: string;
  name: string;
  avatar: string;
  email: string;
  connectedAt?: string;
  onMessage?: (id: string) => void;
}

// Format date
function formatDate(dateString: string): string {
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
}

export function ConnectionCard({
  id,
  name,
  avatar,
  email,
  connectedAt,
  onMessage,
}: ConnectionCardProps) {
  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-row items-center gap-3 sm:gap-4 py-4">
      {/* Avatar */}
      <div className="flex-shrink-0">
        <div className="w-[56px] h-[56px] sm:w-[80px] sm: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-[22px] sm: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 + Message button (stacks on mobile, inline on desktop) */}
      <div className="flex-1 min-w-0 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
        <div className="flex-1 min-w-0">
          <h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#00293D] mb-1 truncate">
            {name}
          </h3>
          <p className="font-serif font-normal text-[13px] leading-[18px] text-[#00293D]/70 mb-1 truncate">
            {email}
          </p>
          {connectedAt && (
            <p className="font-serif font-normal text-[12px] text-[#00293D]/50">
              Connected on {formatDate(connectedAt)}
            </p>
          )}
        </div>

        {/* Action Button */}
        <div className="flex items-center gap-3 flex-shrink-0">
          <button
            onClick={() => onMessage?.(id)}
            className="h-[27px] px-4 rounded-[15px] bg-[#e58625] font-fractul font-medium text-[14px] text-[#00293D] hover:bg-[#d47920] transition-colors cursor-pointer flex items-center gap-2"
          >
            <Image
              src="/assets/icons/message-dark-icon.svg"
              alt="Message"
              width={14}
              height={13}
            />
            Message
          </button>
        </div>
      </div>
    </div>
  );
}
