import { memo } from 'react';
import { MapPin, Pencil, Trash2 } from 'lucide-react';
import type { Delivery } from '../../types';
import { formatPickupLocation } from '../../types';
import { StatusBadge } from './StatusBadge';
import { PaymentBadge } from './PaymentBadge';
import { WhatsAppIcon } from '../ui/WhatsAppIcon';
import { getWhatsAppUrl } from '../../utils/phone';

interface DeliveryRowProps {
  delivery: Delivery;
  onStatusChange: (id: string) => void;
  onEdit: (delivery: Delivery) => void;
  onDelete: (id: string) => void;
  pending?: boolean;
}
export const DeliveryRow = memo(({ delivery: d, onStatusChange, onEdit, onDelete, pending }: DeliveryRowProps) => (
  <tr data-tour="delivery-card" aria-busy={pending} className="align-top transition-colors hover:bg-[#f5f3f5]">
    <td className="px-3 py-3"><StatusBadge status={d.status} onClick={() => onStatusChange(d.id)} disabled={pending} size="sm" /></td>
    <td className="min-w-[140px] max-w-[220px] px-3 py-3 text-sm">
      <p className="break-words font-medium">{d.productName}</p><p className="mt-1 text-[#666870]">{formatPickupLocation(d.pickupLocation, d.warehouseRequestSource)}</p>
      {d.pickupLocation2 && <div className="mt-2"><p className="break-words font-medium">{d.productName2 || 'Вторая загрузка'}</p><p className="mt-1 text-[#666870]">{formatPickupLocation(d.pickupLocation2, d.warehouseRequestSource2)}</p></div>}
    </td>
    <td className="min-w-[190px] px-3 py-3 text-sm"><p className="font-medium">{d.customerName}</p>
      <div className="flex items-center gap-1"><a href={`tel:${d.phone}`} className="flex min-h-11 items-center whitespace-nowrap text-[#166534] hover:underline">{d.phone}</a><a href={getWhatsAppUrl(d.phone)} className="icon-button text-[#166534]" aria-label={`WhatsApp: ${d.phone}`}><WhatsAppIcon className="h-5 w-5" /></a></div>
      {d.additionalPhone && <div className="flex items-center gap-1"><a href={`tel:${d.additionalPhone}`} className="flex min-h-11 items-center whitespace-nowrap text-[#666870]">{d.additionalPhone}</a><a href={getWhatsAppUrl(d.additionalPhone)} className="icon-button" aria-label={`WhatsApp: ${d.additionalPhone}`}><WhatsAppIcon className="h-5 w-5" /></a></div>}
    </td>
    <td className="min-w-[160px] max-w-[220px] px-3 py-3 text-sm">
      <a href={`https://2gis.kz/kokshetau/search/${encodeURIComponent(d.address)}`} target="_blank" rel="noopener noreferrer" className="flex min-h-11 items-start gap-1.5 text-[#1B263B] underline-offset-4 hover:underline"><MapPin size={16} className="mt-0.5 shrink-0" /><span className="break-words">ул. {d.street}, д. {d.house}{d.apartment ? `, кв. ${d.apartment}` : ''}</span></a>
      <p className="mt-1 text-[#666870]">{[d.entrance && `Подъезд ${d.entrance}`, d.floor && `этаж ${d.floor}`, d.hasElevator ? 'есть лифт' : 'нет лифта'].filter(Boolean).join(' · ')}</p>
    </td>
    <td className="px-3 py-3"><PaymentBadge status={d.paymentStatus} size="sm" /></td>
    <td className="min-w-[130px] max-w-[210px] break-words px-3 py-3 text-sm text-[#45474d]">{d.serviceInfo && <p className="mb-2 font-medium">{d.serviceInfo}</p>}{d.comment || '—'}</td>
    <td className="px-3 py-3"><div className="flex gap-1">
      <button type="button" disabled={pending} onClick={() => onEdit(d)} className="icon-button" title="Редактировать" aria-label={`Редактировать доставку для ${d.customerName}`}><Pencil size={18} /></button>
      <button type="button" disabled={pending} onClick={() => onDelete(d.id)} className="icon-button text-red-700" title="Удалить" aria-label={`Удалить доставку для ${d.customerName}`}><Trash2 size={18} /></button>
    </div></td>
  </tr>
));
DeliveryRow.displayName = 'DeliveryRow';