'use client';
import { Phone, MessageCircle, MapPin, Edit, ClipboardList } from 'lucide-react';
import { buildWhatsappUrl, buildMapsUrl, formatDate } from '@/lib/utils';
import { cn } from '@/lib/utils';
import Link from 'next/link';

interface Props {
  client: any;
  onEdit: (client: any) => void;
}

const typeLabel: Record<string, string> = {
  RESIDENTIAL: 'Residencial',
  COMMERCIAL: 'Comercial',
  INDUSTRIAL: 'Industrial',
};

export function ClientCard({ client, onEdit }: Props) {
  const nextReminder = client.reminders?.[0];
  const isOverdue = nextReminder?.status === 'OVERDUE';
  const isToday = nextReminder?.status === 'PENDING' &&
    new Date(nextReminder?.nextMaintenanceDate).toDateString() === new Date().toDateString();

  return (
    <div className={cn(
      'bg-white rounded-xl border shadow-sm hover:shadow-md transition-all p-4',
      isOverdue && 'border-red-200 bg-red-50/30',
      isToday && 'border-amber-200 bg-amber-50/30',
    )}>
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-gray-900 truncate">{client.name}</h3>
            {isOverdue && <span className="text-xs bg-red-100 text-red-700 px-1.5 py-0.5 rounded-full font-medium">Vencido</span>}
            {isToday && <span className="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded-full font-medium">Hoje</span>}
          </div>
          <span className="text-xs text-gray-500">{typeLabel[client.type] || client.type}</span>
        </div>
        <div className="flex items-center gap-1">
          <button onClick={() => onEdit(client)} className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors">
            <Edit className="w-4 h-4" />
          </button>
        </div>
      </div>

      {nextReminder && (
        <p className={cn(
          'text-xs mb-3 px-2 py-1 rounded',
          isOverdue ? 'text-red-600 bg-red-50' : 'text-amber-700 bg-amber-50',
        )}>
          Próx. manutenção: {formatDate(nextReminder.nextMaintenanceDate)}
        </p>
      )}

      <div className="flex items-center gap-2 text-xs text-gray-600 mb-3">
        <span>{client._count?.orders || 0} OS</span>
        {client.city && <><span>·</span><span>{client.city}</span></>}
      </div>

      <div className="flex items-center gap-2">
        <a href={`tel:${client.phone}`} className="flex items-center gap-1.5 text-xs bg-gray-100 hover:bg-gray-200 px-2.5 py-1.5 rounded-lg transition-colors text-gray-700 font-medium">
          <Phone className="w-3.5 h-3.5" />
          Ligar
        </a>
        <a
          href={buildWhatsappUrl(client.whatsapp || client.phone, client.name)}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1.5 text-xs bg-green-100 hover:bg-green-200 px-2.5 py-1.5 rounded-lg transition-colors text-green-700 font-medium"
        >
          <MessageCircle className="w-3.5 h-3.5" />
          WhatsApp
        </a>
        <Link
          href={`/orders?clientId=${client.id}`}
          className="flex items-center gap-1.5 text-xs bg-blue-100 hover:bg-blue-200 px-2.5 py-1.5 rounded-lg transition-colors text-blue-700 font-medium ml-auto"
        >
          <ClipboardList className="w-3.5 h-3.5" />
          OS
        </Link>
        {(client.latitude || client.address) && (
          <a
            href={buildMapsUrl(client.latitude, client.longitude, client.address)}
            target="_blank"
            rel="noopener noreferrer"
            className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
          >
            <MapPin className="w-4 h-4" />
          </a>
        )}
      </div>
    </div>
  );
}
