import React from 'react';

interface OwnerData {
  name?: string;
  company?: string;
  portfolioSize?: number;
  phones?: Array<{ number: string; type?: string }>;
  emails?: string[];
}

interface OwnerCardProps {
  owner: OwnerData;
  onToast?: (msg: string) => void;
}

export function OwnerCard({ owner, onToast }: OwnerCardProps) {
  const copyToClipboard = (text: string, label: string) => {
    navigator.clipboard.writeText(text).then(() => {
      onToast?.(`${label} copied!`);
    }).catch(() => {
      onToast?.('Copy failed');
    });
  };

  return (
    <div className="bg-gray-50 rounded-lg p-3 space-y-2">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-semibold text-reo-dark">{owner.name || 'Unknown'}</p>
          {owner.company && (
            <p className="text-xs text-gray-500">{owner.company}</p>
          )}
        </div>
        {owner.portfolioSize != null && (
          <span className="badge badge-info">{owner.portfolioSize} properties</span>
        )}
      </div>

      {/* Phones */}
      {owner.phones && owner.phones.length > 0 && (
        <div className="space-y-1">
          {owner.phones.map((phone, i) => (
            <button
              key={i}
              onClick={() => copyToClipboard(phone.number, 'Phone')}
              className="flex items-center gap-2 text-sm text-reo-dark hover:text-reo-teal transition-colors group w-full text-left"
              title="Click to copy"
            >
              <svg className="w-3.5 h-3.5 text-gray-400 group-hover:text-reo-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
              <span className="font-mono">{phone.number}</span>
              {phone.type && <span className="text-xs text-gray-400">({phone.type})</span>}
              <svg className="w-3 h-3 text-gray-300 group-hover:text-reo-teal ml-auto opacity-0 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
            </button>
          ))}
        </div>
      )}

      {/* Emails */}
      {owner.emails && owner.emails.length > 0 && (
        <div className="space-y-1">
          {owner.emails.map((email, i) => (
            <button
              key={i}
              onClick={() => copyToClipboard(email, 'Email')}
              className="flex items-center gap-2 text-sm text-reo-dark hover:text-reo-teal transition-colors group w-full text-left"
              title="Click to copy"
            >
              <svg className="w-3.5 h-3.5 text-gray-400 group-hover:text-reo-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              <span>{email}</span>
              <svg className="w-3 h-3 text-gray-300 group-hover:text-reo-teal ml-auto opacity-0 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
            </button>
          ))}
        </div>
      )}

      {/* No contact info */}
      {(!owner.phones || owner.phones.length === 0) && (!owner.emails || owner.emails.length === 0) && (
        <p className="text-xs text-gray-400 italic">No contact info available</p>
      )}
    </div>
  );
}
