// Move a personal account into a business as a contact — the "he's actually
// a person AT that company" fix-up. Wraps POST /api/accounts/:id/convert-to-
// contact: mints the contact from the person fields, moves all history via
// the merge core, hides the personal account. Sibling of MergeAccountModal;
// the picker is business-only because the server refuses any other target.
const MoveToBusinessModal = ({ sourceAccount, onMoved, onClose }) => {
    const [target, setTarget] = React.useState(null); // full account — the confirm needs its name
    const [moving, setMoving] = React.useState(false);
    const [error, setError]   = React.useState('');

    const handleMove = async () => {
        if (!target) return;
        if (!await confirmAction(
            `Move "${sourceAccount.name}" into "${target.name}" as a contact?\n\n` +
            `Their communications, tasks, and documents will move to "${target.name}", ` +
            `and "${sourceAccount.name}" will no longer appear as its own account. This cannot be undone.`)) return;
        setMoving(true); setError('');
        try {
            await onMoved(sourceAccount.id, target.id);
            onClose();
        } catch (e) { setError(e.message); setMoving(false); }
    };

    return (
        <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
            <div className="modal modal-medium">
                <div className="modal-header">
                    <h2 className="modal-title"><i className="fas fa-user-plus" style={{ marginRight: '0.5rem' }}></i>Move Into a Business</h2>
                    <button className="modal-close-btn" onClick={onClose}>&times;</button>
                </div>
                <div className="modal-body">
                    <div style={{ background: '#fef3c7', border: '1px solid #fcd34d', borderRadius: '0.375rem', padding: '0.75rem 1rem', marginBottom: '1.25rem', fontSize: '0.875rem' }}>
                        <strong>Moving:</strong> {sourceAccount.name}<br />
                        <span style={{ fontSize: '0.8125rem', color: '#92400e' }}>
                            They become a contact on the business you pick, and their history
                            (communications, tasks, quotes, invoices, activity) moves with them.
                        </span>
                    </div>
                    <div className="form-group full-width" style={{ marginBottom: '0.75rem' }}>
                        <label className="form-label">Business account *</label>
                        <AccountPicker
                            value={target?.id || ''}
                            initialName={target?.name}
                            excludeId={sourceAccount.id}
                            filters={{ type: 'business' }}
                            autoFocus
                            onChange={(id, a) => setTarget(a)}
                        />
                    </div>
                    {error && <div className="api-error" style={{ marginTop: '0.75rem' }}>{error}</div>}
                    <div className="btn-group">
                        <button className="btn btn-secondary" onClick={onClose} disabled={moving}>Cancel</button>
                        <button className="btn btn-primary" onClick={handleMove} disabled={!target || moving}>
                            {moving
                                ? <><i className="fas fa-spinner fa-spin"></i> Moving…</>
                                : <><i className="fas fa-user-plus"></i> Move Into {target?.name || '…'}</>}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};