import React from 'react';
import { useNavigate } from 'react-router-dom';
import { initials, cardTypeLabel } from '../../utils/format';
import type { Guest } from '../../types/guest';

interface Props {
  guest: Guest;
  style?: React.CSSProperties;
}

const TYPE_COLORS: Record<string, string> = {
  SINGLE: 'bg-blue-100 text-blue-700',
  DOUBLE: 'bg-purple-100 text-purple-700',
  GROUP: 'bg-orange-100 text-orange-700',
};

export function GuestCard({ guest, style }: Props) {
  const navigate = useNavigate();
  const isComplete = guest.checked_in_count >= guest.total_attendees;

  return (
    <div
      style={style}
      className="flex items-center gap-3 px-4 py-3 border-b border-slate-100 bg-white active:bg-slate-50 cursor-pointer transition-colors"
      onClick={() => navigate(`/checkin-app/guest/${guest.id}`)}
    >
      {/* Avatar */}
      <div className="h-11 w-11 rounded-full bg-primary text-white flex items-center justify-center text-sm font-bold shrink-0">
        {initials(guest.name)}
      </div>

      {/* Info */}
      <div className="flex-1 min-w-0">
        <p className="font-semibold text-slate-900 truncate">{guest.name}</p>
        <p className="text-xs text-slate-500 mt-0.5">
          <span className={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium mr-1.5 ${TYPE_COLORS[guest.card_type] ?? 'bg-slate-100 text-slate-600'}`}>
            {cardTypeLabel(guest.card_type)}
          </span>
          {guest.card_number ? `#${guest.card_number}` : 'No card #'}
        </p>
      </div>

      {/* Check icon — navigates to guest detail */}
      <button
        onClick={e => {
          e.stopPropagation();
          navigate(`/checkin-app/guest/${guest.id}`);
        }}
        className={`shrink-0 h-10 w-10 rounded-full flex items-center justify-center transition-all active:scale-90 ${
          isComplete
            ? 'bg-emerald-100 text-emerald-600'
            : 'bg-primary text-white shadow'
        }`}
        aria-label="View guest detail"
      >
        <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
        </svg>
      </button>
    </div>
  );
}
