// Model Home Names — controlled vocabulary for the "Model home" listing
// field (migration 0011). Same pattern as Product Categories: admin/manager
// curates the list, the listing form offers only these names once a home's
// Model home is set to Yes. Deleting one never touches existing homes —
// they keep the label; it just stops being offered on new records.

const ModelHomesSection = ({ currentUser }) => {
    const [homes, setHomes]     = React.useState([]);
    const [newName, setNewName] = React.useState('');
    const [saving, setSaving]   = React.useState(false);
    const [editing, setEditing] = React.useState(null); // { id, name } mid-edit

    const isManager = currentUser.role === 'admin' || currentUser.role === 'manager';

    const handleSaveEdit = async (e) => {
        e.preventDefault();
        if (!editing.name.trim()) return;
        try {
            await api.updateModelHome(editing.id, { name: editing.name.trim() });
            setEditing(null); refresh();
        } catch (err) { alert(err.message); }
    };

    const [loadErr, setLoadErr] = React.useState(false);
    const refresh = () => api.getModelHomes().then(rows => { setHomes(rows); setLoadErr(false); }).catch(() => setLoadErr(true));
    React.useEffect(() => { refresh(); }, []);

    const handleCreate = async (e) => {
        e.preventDefault();
        if (!newName.trim()) return;
        setSaving(true);
        try {
            await api.createModelHome({ name: newName.trim() });
            setNewName(''); refresh();
        } catch (err) { alert(err.message); }
        finally { setSaving(false); }
    };

    const handleDelete = async (h) => {
        if (!await confirmAction(`Delete "${h.name}"? Existing homes keep the label — it just stops being offered on new listings.`)) return;
        try { await api.deleteModelHome(h.id); refresh(); }
        catch (err) { alert(err.message); }
    };

    return (
        <div className="settings-form">
            {loadErr && (
                <LoadErrorBanner what="model home names" hasData={homes.length > 0} onRetry={refresh} />
            )}
            <p style={{ fontSize: '0.875rem', color: 'var(--text-3)', marginBottom: '1.25rem' }}>
                The model home names your listings pick from. Once a listing's "Model home" is set to Yes,
                the form offers exactly this list — define your model names here once.
            </p>
            {isManager && (
                <form onSubmit={handleCreate} style={{ display: 'flex', gap: '0.75rem', alignItems: 'flex-end', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
                    <div className="form-group" style={{ flex: 1, minWidth: 180 }}>
                        <label className="form-label">Model Home Name</label>
                        <input className="form-input" value={newName} onChange={e => setNewName(e.target.value)} placeholder="e.g. Key West, The Sabal…" required />
                    </div>
                    <button type="submit" className="btn btn-primary btn-small" disabled={saving} style={{ marginBottom: '0.1rem' }}>
                        {saving ? <><i className="fas fa-spinner fa-spin"></i> Adding…</> : <><i className="fas fa-plus"></i> Add Name</>}
                    </button>
                </form>
            )}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem' }}>
                {homes.length === 0
                    ? <p style={{ color: 'var(--text-3)', fontSize: '0.875rem' }}>No model home names yet.</p>
                    : homes.map(h => editing?.id === h.id ? (
                        <form key={h.id} onSubmit={handleSaveEdit} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', border: '1px solid var(--border)', borderRadius: '0.5rem', padding: '0.4rem 0.6rem' }}>
                            <input className="form-input" style={{ width: 180, padding: '0.3rem 0.5rem' }} value={editing.name} autoFocus
                                onChange={e => setEditing(p => ({ ...p, name: e.target.value }))} />
                            <button type="submit" className="btn btn-primary btn-small"><i className="fas fa-check"></i></button>
                            <button type="button" className="btn btn-secondary btn-small" onClick={() => setEditing(null)}><i className="fas fa-times"></i></button>
                        </form>
                    ) : (
                        <div key={h.id} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'var(--surface-2, #1f2937)', border: '1px solid var(--border, #374151)', borderRadius: '999px', padding: '0.3rem 0.75rem 0.3rem 0.75rem' }}>
                            <i className="fas fa-home" style={{ fontSize: '0.7rem', color: 'var(--text-3)' }}></i>
                            <span style={{ fontWeight: 600, fontSize: '0.8125rem' }}>{h.name}</span>
                            <span style={{ fontSize: '0.75rem', color: 'var(--text-3)' }}>({h.usage_count})</span>
                            {isManager && (<>
                                <button className="btn-icon-sm" onClick={() => setEditing({ id: h.id, name: h.name })} title="Rename" style={{ padding: '0.1rem 0.3rem', fontSize: '0.7rem' }}><i className="fas fa-pencil-alt"></i></button>
                                <button className="btn-icon-sm danger" onClick={() => handleDelete(h)} title="Delete" style={{ padding: '0.1rem 0.3rem', fontSize: '0.7rem' }}><i className="fas fa-times"></i></button>
                            </>)}
                        </div>
                    ))
                }
            </div>
        </div>
    );
};