import React, { useState } from 'react';
import { Lead } from '../../../entities/crm/lead';
import { Modal } from '../../../shared/ui/Modal';
import { Button } from '../../../shared/ui/Button';

export interface LeadConversionModalProps {
  isOpen: boolean;
  lead: Lead | null;
  onClose: () => void;
  onConvert: (leadId: string, dealTitle: string) => Promise<void> | void;
}

export const LeadConversionModal: React.FC<LeadConversionModalProps> = ({
  isOpen,
  lead,
  onClose,
  onConvert,
}) => {
  const [prevLead, setPrevLead] = useState<Lead | null>(null);
  const [dealTitle, setDealTitle] = useState('');

  if (lead !== prevLead) {
    setPrevLead(lead);
    setDealTitle(lead ? `Сделка: ${lead.title}` : '');
  }

  const handleConfirm = async () => {
    if (!lead) return;
    await onConvert(lead.id, dealTitle || lead.title);
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Конвертация лида в сделку и контакт"
      size="md"
    >
      <div className="space-y-4 text-xs">
        <p className="text-krona-secondary">
          При конвертации будет автоматически создан Контакт клиента и новая Сделка на этапе «Предложение».
        </p>
        <div>
          <label className="block font-semibold text-krona-primary mb-1">
            Название новой сделки:
          </label>
          <input
            type="text"
            value={dealTitle}
            onChange={(e) => setDealTitle(e.target.value)}
            className="w-full px-3 py-1.5 bg-krona-workspace border border-krona-border rounded-lg text-krona-primary focus:outline-none focus:border-krona-green"
          />
        </div>

        <div className="flex justify-end gap-2 pt-2 border-t border-krona-border">
          <Button variant="secondary" size="sm" onClick={onClose}>
            Отмена
          </Button>
          <Button
            variant="primary"
            size="sm"
            data-testid="confirm-convert-lead-btn"
            onClick={handleConfirm}
          >
            Подтвердить конвертацию
          </Button>
        </div>
      </div>
    </Modal>
  );
};