// Task Presets — reusable "when a customer pays" task lists (migration 0062).
// Admin defines ("Web", "CRM"…); the product form applies one or several by
// COPYING their tasks onto the item. Editing or deleting a preset never
// touches products that already applied it (snapshot doctrine — same as
// categories/tags).

const TaskPresetsSection = ({ currentUser }) => {
    const [presets, setPresets] = React.useState([]);
    const [loadErr, setLoadErr] = React.useState(false);
    const [editing, setEditing] = React.useState(null);   // null | { id?, name, tasks }
    const [saving, setSaving]   = React.useState(false);
    const [err, setErr]         = React.useState('');

    const refresh = () => api.getTaskPresets().then(rows => { setPresets(rows); setLoadErr(false); }).catch(() => setLoadErr(true));
    React.useEffect(() => { refresh(); }, []);

    const startNew  = () => { setErr(''); setEditing({ name: '', tasks: [{ title: '', notes: '' }] }); };
    const startEdit = (p) => { setErr(''); setEditing({ id: p.id, name: p.name, tasks: p.tasks.map(t => ({ ...t })) }); };

    const handleSave = async (e) => {
        e.preventDefault();
        setErr('');
        const tasks = editing.tasks.filter(t => (t.title || '').trim() || (t.notes || '').trim());
        if (!editing.name.trim()) return setErr('Preset name is required.');
        if (tasks.length === 0) return setErr('Add at least one task.');
        setSaving(true);
        try {
            if (editing.id) await api.updateTaskPreset(editing.id, { name: editing.name.trim(), tasks });
            else            await api.createTaskPreset({ name: editing.name.trim(), tasks });
            setEditing(null); refresh();
        } catch (ex) { setErr(ex.message); }
        finally { setSaving(false); }
    };

    const handleDelete = async (p) => {
        if (!await confirmAction(`Delete preset "${p.name}"? Items that already applied it keep their tasks.`)) return;
        try { await api.deleteTaskPreset(p.id); refresh(); }
        catch (ex) { setErr(ex.message); }
    };

    const isAdmin = currentUser.role === 'admin';

    return (
        <div className="settings-form">
            {loadErr && <LoadErrorBanner what="task presets" hasData={presets.length > 0} onRetry={refresh} />}
            <p style={{ fontSize: '0.875rem', color: 'var(--text-3)', marginBottom: '1.25rem' }}>
                Reusable task lists for "when a customer pays". On any inventory item, apply a
                preset — or several — and reorder the combined list. Applying copies the tasks
                onto the item, so changing a preset later never rewrites existing items.
            </p>
            {err && <div className="form-error" style={{ marginBottom: '0.75rem', color: 'var(--danger, #ef4444)', fontSize: '0.8125rem' }}>{err}</div>}

            {editing ? (
                <form onSubmit={handleSave} style={{ border: '1px solid var(--border)', borderRadius: '0.5rem', padding: '1rem', marginBottom: '1.5rem' }}>
                    <div className="form-group" style={{ maxWidth: 320 }}>
                        <label className="form-label">Preset name</label>
                        <input className="form-input" value={editing.name} autoFocus maxLength={100}
                               placeholder="e.g. Web, CRM, Hosting"
                               onChange={e => setEditing(p => ({ ...p, name: e.target.value }))} />
                    </div>
                    <div className="form-group">
                        <label className="form-label">Tasks, in order</label>
                        <TaskListEditor tasks={editing.tasks} onChange={tasks => setEditing(p => ({ ...p, tasks }))} />
                    </div>
                    <div style={{ display: 'flex', gap: '0.5rem' }}>
                        <button type="submit" className="btn btn-primary btn-small" disabled={saving}>
                            {saving ? <><i className="fas fa-spinner fa-spin"></i> Saving…</> : <><i className="fas fa-check"></i> {editing.id ? 'Save preset' : 'Create preset'}</>}
                        </button>
                        <button type="button" className="btn btn-secondary btn-small" onClick={() => setEditing(null)}>Cancel</button>
                    </div>
                </form>
            ) : isAdmin && (
                <button type="button" className="btn btn-primary btn-small" style={{ marginBottom: '1.5rem' }} onClick={startNew}>
                    <i className="fas fa-plus"></i> New preset
                </button>
            )}

            {presets.length === 0
                ? <p style={{ color: 'var(--text-3)', fontSize: '0.875rem' }}>No presets yet.</p>
                : presets.map(p => (
                    <div key={p.id} style={{ border: '1px solid var(--border)', borderRadius: '0.5rem', padding: '0.75rem 1rem', marginBottom: '0.75rem' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                            <i className="fas fa-tasks" style={{ color: 'var(--text-3)', fontSize: '0.8rem' }}></i>
                            <span style={{ fontWeight: 600 }}>{p.name}</span>
                            <span style={{ fontSize: '0.75rem', color: 'var(--text-3)' }}>({p.tasks.length} task{p.tasks.length === 1 ? '' : 's'})</span>
                            {isAdmin && (<span style={{ marginLeft: 'auto', display: 'flex', gap: '0.25rem' }}>
                                <button className="btn-icon-sm" onClick={() => startEdit(p)} title="Edit preset"><i className="fas fa-pencil-alt"></i></button>
                                <button className="btn-icon-sm danger" onClick={() => handleDelete(p)} title="Delete preset"><i className="fas fa-times"></i></button>
                            </span>)}
                        </div>
                        <ol style={{ margin: '0.5rem 0 0 1.25rem', fontSize: '0.8125rem', color: 'var(--text-2)' }}>
                            {p.tasks.map((t, i) => (
                                <li key={i}>{t.title}{t.notes && <span style={{ color: 'var(--text-3)' }}> — {t.notes}</span>}</li>
                            ))}
                        </ol>
                    </div>
                ))}
        </div>
    );
};