// One row in the Portal Settings field editor + its inline editor when expanded.
function FieldRow({ field, canMove, isEditing, onEdit, onMove, onDelete, onChange }) {
  return (
    <div style={{
      borderBottom: '1px solid var(--border)',
      background: isEditing ? 'var(--bg-sunken)' : 'transparent',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', padding: '12px 20px', gap: 12, flexWrap: 'nowrap' }}>
        {/* Drag handle / order */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, opacity: canMove ? 1 : 0.3, flexShrink: 0 }}>
          <button onClick={() => canMove && onMove(-1)} disabled={!canMove}
                  style={{ width: 18, height: 14, padding: 0, border: 0, background: 'transparent', cursor: canMove ? 'pointer' : 'default', color: 'var(--text-tertiary)' }}>▲</button>
          <button onClick={() => canMove && onMove(1)} disabled={!canMove}
                  style={{ width: 18, height: 14, padding: 0, border: 0, background: 'transparent', cursor: canMove ? 'pointer' : 'default', color: 'var(--text-tertiary)' }}>▼</button>
        </div>

        <div style={{
          width: 32, height: 32, borderRadius: 6, background: 'var(--bg-sunken)',
          display: 'grid', placeItems: 'center', color: 'var(--text-secondary)', flexShrink: 0,
        }}>
          <FieldKindIcon kind={field.kind}/>
        </div>

        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', minWidth: 0, rowGap: 4 }}>
            <div style={{ fontWeight: 500, fontSize: 13.5, overflowWrap: 'anywhere' }}>{field.label}</div>
            {field.system && <span className="pill" style={{ fontSize: 10, padding: '1px 6px', height: 16, flexShrink: 0 }}>System</span>}
            {field.required && <span className="pill" style={{ fontSize: 10, padding: '1px 6px', height: 16, background: 'var(--accent-soft)', color: 'var(--accent)', borderColor: 'transparent', flexShrink: 0 }}>Required</span>}
          </div>
          <div className="xs muted" style={{ marginTop: 2, overflowWrap: 'anywhere' }}>
            {kindLabel(field.kind)}{field.hint ? ` · ${field.hint}` : ''}{field.items ? ` · ${field.items.length} options` : ''}
          </div>
        </div>

        <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
          <button className="btn ghost" style={{ height: 28, padding: '0 10px', fontSize: 12 }} onClick={onEdit}>
            {isEditing ? 'Done' : 'Edit'}
          </button>
          {!field.system && (
            <button className="btn ghost" style={{ height: 28, padding: '0 8px', fontSize: 12, color: 'var(--expense)' }} onClick={onDelete}>
              Delete
            </button>
          )}
        </div>
      </div>

      {/* Inline editor */}
      {isEditing && (
        <div style={{ padding: '4px 20px 20px 82px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span className="xs muted">Label</span>
              <input className="input" value={field.label} onChange={e => onChange({ label: e.target.value })}/>
            </label>
            <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span className="xs muted">Helper text (optional)</span>
              <input className="input" value={field.hint || ''} onChange={e => onChange({ hint: e.target.value })}
                     placeholder="e.g. From the laundromat receipt"/>
            </label>
          </div>

          <label className="row" style={{ gap: 8, cursor: 'pointer', fontSize: 13 }}>
            <input type="checkbox" checked={!!field.required} onChange={e => onChange({ required: e.target.checked })}
                   disabled={field.system} style={{ margin: 0 }}/>
            <span>Required field</span>
          </label>

          {(field.kind === 'select' || field.kind === 'checklist') && (
            <ItemsEditor items={field.items || []} onChange={items => onChange({ items })}
                         singular={field.kind === 'select' ? 'option' : 'checklist item'}/>
          )}
        </div>
      )}
    </div>
  );
}

function ItemsEditor({ items, onChange, singular }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span className="xs muted">{singular === 'option' ? 'Options' : 'Checklist items'}</span>
      {items.map((item, i) => (
        <div key={i} className="row" style={{ gap: 6 }}>
          <input className="input" value={item}
                 onChange={e => onChange(items.map((x, j) => j === i ? e.target.value : x))}/>
          <button className="btn ghost" style={{ height: 32, padding: '0 10px', fontSize: 12, color: 'var(--expense)' }}
                  onClick={() => onChange(items.filter((_, j) => j !== i))}>Remove</button>
        </div>
      ))}
      <button className="btn" style={{ alignSelf: 'flex-start', marginTop: 2, height: 28, padding: '0 10px', fontSize: 12 }}
              onClick={() => onChange([...items, `New ${singular}`])}>
        + Add {singular}
      </button>
    </div>
  );
}

Object.assign(window, { FieldRow, ItemsEditor });