// Sign-off gate for completing a flagged task (requires_signoff). The typed
// initials are deliberately redundant with the logged-in user — same pattern
// as the console's type-the-name confirms: the friction IS the feature. The
// server refuses a bare complete on these tasks, so this modal is the UI for
// the rule, not the rule itself.
const TaskSignoffModal = ({ task, onClose, onConfirm }) => {
    const [note, setNote]         = React.useState('');
    const [initials, setInitials] = React.useState('');
    const [saving, setSaving]     = React.useState(false);
    const [error, setError]       = React.useState(null);

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!note.trim() || !initials.trim()) return;
        setSaving(true);
        setError(null);
        try {
            await onConfirm({ signoff_note: note.trim(), signoff_initials: initials.trim() });
        } catch (err) {
            setError(err.message);
            setSaving(false);
        }
    };

    return (
        <Modal isOpen={true} onClose={onClose} title="Sign off to complete">
            <form onSubmit={handleSubmit}>
                <p style={{ fontSize: '0.875rem', color: 'var(--text-2)', marginBottom: '0.75rem' }}>
                    <i className="fas fa-clipboard-check" style={{ marginRight: '0.4rem' }}></i>
                    <strong>{task.title}</strong> requires sign-off — record what was done before it closes.
                </p>
                <div className="form-group">
                    <label className="form-label">What was done</label>
                    <textarea
                        className="form-input"
                        rows={3}
                        maxLength={2000}
                        placeholder="e.g. Site deployed to hosting, DNS verified, customer notified"
                        value={note}
                        onChange={(e) => setNote(e.target.value)}
                        autoFocus
                    />
                </div>
                <div className="form-group">
                    <label className="form-label">Your initials</label>
                    <input
                        className="form-input"
                        style={{ maxWidth: '8rem' }}
                        maxLength={20}
                        placeholder="e.g. DK"
                        value={initials}
                        onChange={(e) => setInitials(e.target.value)}
                    />
                </div>
                {error && <p className="form-error" style={{ color: 'var(--danger, #ef4444)', fontSize: '0.85rem' }}>{error}</p>}
                <div className="modal-actions" style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', marginTop: '1rem' }}>
                    <button type="button" className="btn btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
                    <button type="submit" className="btn btn-primary" disabled={saving || !note.trim() || !initials.trim()}>
                        {saving ? <><i className="fas fa-spinner fa-spin"></i> Completing…</> : <><i className="fas fa-check"></i> Sign off & complete</>}
                    </button>
                </div>
            </form>
        </Modal>
    );
};