import { useState } from 'react';
import Badge from '../UI/Badge';
import Button from '../UI/Button';
import { formatRelativeTime } from '../../utils/formatters';

function LeadRow({ lead, onSendReminder, onDelete, onView }) {
  const [reminderLoading, setReminderLoading] = useState(false);
  const [deleteLoading, setDeleteLoading]     = useState(false);

  const handleSendReminder = async (e) => {
    e.stopPropagation();
    setReminderLoading(true);
    try {
      await onSendReminder(lead.id);
    } finally {
      setReminderLoading(false);
    }
  };

  const handleDelete = async (e) => {
    e.stopPropagation();
    if (!confirm(window.rescueFill?.strings?.confirmDelete || 'Are you sure you want to delete this lead?')) {
      return;
    }
    setDeleteLoading(true);
    try {
      await onDelete(lead.id);
    } finally {
      setDeleteLoading(false);
    }
  };

  return (
    <tr
      className="hover:bg-slate-50 transition-colors cursor-pointer"
      onClick={() => onView(lead)}
    >
      <td className="px-6 py-4 whitespace-nowrap">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center text-primary-600 text-sm font-semibold">
            {lead.email.charAt(0).toUpperCase()}
          </div>
          <span className="text-sm font-medium text-slate-900">{lead.email}</span>
        </div>
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
        <span className="text-sm text-slate-600">{lead.form_name || 'Unknown Form'}</span>
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
        <Badge status={lead.status} />
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
        {formatRelativeTime(lead.last_activity)}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-right">
        <div className="flex items-center justify-end gap-2" onClick={e => e.stopPropagation()}>
          <Button variant="ghost" size="sm" onClick={() => onView(lead)}>
            View
          </Button>
          {lead.status === 'abandoned' && (
            <Button
              variant="primary"
              size="sm"
              loading={reminderLoading}
              onClick={handleSendReminder}
            >
              Remind
            </Button>
          )}
          <Button
            variant="danger"
            size="sm"
            loading={deleteLoading}
            onClick={handleDelete}
          >
            Delete
          </Button>
        </div>
      </td>
    </tr>
  );
}

export default LeadRow;