import { buildWhatsappUrl } from '@/lib/utils';
import { MessageCircle, Phone } from 'lucide-react';

interface ClientAlert {
  client: { id: string; name: string; phone: string; whatsapp?: string };
  nextMaintenanceDate: string;
}

interface Props {
  overdueClients: ClientAlert[];
  todayClients: ClientAlert[];
}

export function ClientAlertList({ overdueClients, todayClients }: Props) {
  const all = [
    ...overdueClients.map((c) => ({ ...c, type: 'overdue' as const })),
    ...todayClients.map((c) => ({ ...c, type: 'today' as const })),
  ];

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100">
      <div className="p-4 border-b border-gray-100">
        <h3 className="font-semibold text-gray-900">Requer Atenção</h3>
        <p className="text-xs text-gray-500 mt-0.5">{all.length} clientes</p>
      </div>
      <div className="divide-y divide-gray-50 max-h-[340px] overflow-y-auto">
        {all.length === 0 && (
          <div className="p-6 text-center text-gray-400 text-sm">
            Nenhum cliente vencido hoje
          </div>
        )}
        {all.map((item, i) => (
          <div key={i} className={`p-3 flex items-center gap-3 ${item.type === 'overdue' ? 'bg-red-50/50' : 'bg-amber-50/50'}`}>
            <div className={`w-2 h-2 rounded-full flex-shrink-0 ${item.type === 'overdue' ? 'bg-red-500' : 'bg-amber-500'}`} />
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900 truncate">{item.client.name}</p>
              <p className={`text-xs ${item.type === 'overdue' ? 'text-red-600' : 'text-amber-600'}`}>
                {item.type === 'overdue' ? 'Manutenção vencida' : 'Manutenção hoje'}
              </p>
            </div>
            <div className="flex gap-1">
              <a
                href={buildWhatsappUrl(item.client.whatsapp || item.client.phone, item.client.name)}
                target="_blank"
                rel="noopener noreferrer"
                className="p-1.5 rounded-lg hover:bg-green-100 text-green-600 transition-colors"
                title="Enviar WhatsApp"
              >
                <MessageCircle className="w-4 h-4" />
              </a>
              <a
                href={`tel:${item.client.phone}`}
                className="p-1.5 rounded-lg hover:bg-blue-100 text-blue-600 transition-colors"
                title="Ligar"
              >
                <Phone className="w-4 h-4" />
              </a>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
